当前位置：文江博客话题详情

如何在没有两组滚动条的 HTML 页面顶部创建非滚动 div

发布于 2024-07-08 10:25:22 字数 73 浏览 14 评论 0原文

如何在没有两组滚动条的网页上创建看起来像 MS Office 2007 功能区的非滚动 div。一种用于窗口，一种用于 div。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

这个俗人 2024-07-15 10:25:22

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Fixed Header/Full Page Content</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body,
            div {
                margin: 0;
                padding: 0;
            }

            body {
                /* Disable scrollbars and ensure that the body fills the window */
                overflow: hidden;
                width: 100%;
                height: 100%;
            }

            #header {
                /* Provide scrollbars if needed and fix the header dimensions */
                overflow: auto;
                position: absolute;
                width: 100%;
                height: 200px;
            }

            #main {
                /* Provide scrollbars if needed, position below header, and derive height from top/bottom */
                overflow: auto;
                position: absolute;
                width: 100%;
                top: 200px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="header">HEADER</div>
        <div id="main">
            <p>FIRST</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>LAST</p>
        </div>
<!--[if lt IE 7]>
        <script type="text/javascript">
            var elMain = document.getElementById('main');

            setMainDims();
            document.body.onresize = setMainDims;

            function setMainDims() {
                elMain.style.height = (document.body.clientHeight - 200) + 'px';
                elMain.style.width = '99%'
                setTimeout("elMain.style.width = '100%'", 0);
            }
        </script>
<![endif]-->
    </body>
</html>

基本上，您所做的就是从正文中删除滚动条并将滚动条应用于文档内的元素。这很简单。诀窍是调整 #main div 的大小以填充标题下方的空间。在大多数浏览器中，这是通过设置 top 和 bottom 位置并保持 height 未设置来完成的。结果是 div 的顶部固定在标题下方，而 div 的底部将始终拉伸到屏幕底部。

当然，总是有 IE6 来确保我们赚取薪水。在版本 7 之前，IE 不会从冲突的绝对位置导出尺寸。有些人使用 IE 的 css 表达式来解决 IE6 的这个问题，但这些表达式实际上在每次鼠标移动时都会计算，所以我只是在调整大小事件中调整 #main div 的大小，并使用条件注释从其他浏览器中隐藏该 javascript 块。

将宽度设置为 99% 的行和将其设置回 100% 的 setTimeout 修复了 IE6 中的一点渲染异常，该异常会导致在调整窗口大小时偶尔出现水平滚动条。

注意：您必须使用文档类型并使 IE 退出怪异模式。

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Fixed Header/Full Page Content</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body,
            div {
                margin: 0;
                padding: 0;
            }

            body {
                /* Disable scrollbars and ensure that the body fills the window */
                overflow: hidden;
                width: 100%;
                height: 100%;
            }

            #header {
                /* Provide scrollbars if needed and fix the header dimensions */
                overflow: auto;
                position: absolute;
                width: 100%;
                height: 200px;
            }

            #main {
                /* Provide scrollbars if needed, position below header, and derive height from top/bottom */
                overflow: auto;
                position: absolute;
                width: 100%;
                top: 200px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="header">HEADER</div>
        <div id="main">
            <p>FIRST</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>LAST</p>
        </div>
<!--[if lt IE 7]>
        <script type="text/javascript">
            var elMain = document.getElementById('main');

            setMainDims();
            document.body.onresize = setMainDims;

            function setMainDims() {
                elMain.style.height = (document.body.clientHeight - 200) + 'px';
                elMain.style.width = '99%'
                setTimeout("elMain.style.width = '100%'", 0);
            }
        </script>
<![endif]-->
    </body>
</html>

Basically, what you are doing is removing the scrollbars from the body and applying scrollbars to elements inside the document. That is simple. The trick is to get the #main div to size to fill the space below the header. This is accomplished in most browsers by setting both the top and the bottom positions and leaving the height unset. The result is that the top of the div is fixed below the header and the bottom of the div will always stretch to the bottom of the screen.

Of course there is always IE6 there to make sure that we earn our paychecks. Prior to version 7 IE wouldn't derive dimensions from conflicting absolute positions. Some people use IE's css expressions to solve this problem for IE6, but these expressions literally evaluate on every mousemove, so I'm simply resizing the #main div on the resize event and hiding that block of javascript from other browsers using a conditional comment.

The lines setting the width to 99% and the setTimeout to set it back to 100% fixes a little rendering oddity in IE6 that causes the horizontal scrollbar to appear occasionally when you resize the window.

Note: You must use a doctype and get IE out of quirks mode.

回复收藏 0 原文

带刺的爱情 2024-07-15 10:25:22

使用固定位置

元素，该元素具有 100% 宽度和较高的 z-index。

您还需要确保滚动内容的开头不会被固定的

遮挡，直到您开始向下滚动，方法是将其放入另一个 < div> 并适当定位它。

<body>
    <div style="position: fixed; top: 0px; width:100%; height: 100px;">
        HEader content goes here
    </div>
    <div style="margin-top: 100px;">
        Main content goes here
    </div>
</body>

请注意，第一个

的高度和第二个


的上边距需要调整以满足您的需求。

PS 由于某种原因，这在 IE7 中不起作用，但它是一个很好的起点，而且我确信您可以对此主题做出一些变体，以您想要的方式工作。

Use a fixed position <div> element, that has 100% width and a high z-index.

You'll also want to ensure that that the start of your scrolling content isn't obscured by the fixed <div>, until you start scrolling down, by putting this in another <div> and positioning this appropriately.

<body>
    <div style="position: fixed; top: 0px; width:100%; height: 100px;">
        HEader content goes here
    </div>
    <div style="margin-top: 100px;">
        Main content goes here
    </div>
</body>

Note the the height of the first <div>, and the top margin of the second, will need to be adjusted to suit your needs.

P.S. This doesn't work in IE7, for some reason, but it's a good starting point, and I'm sure that you can work out some variation on this theme, that works in the way that you want it to.

回复收藏 0 原文

￡冰雨忧蓝° 2024-07-15 10:25:22

我可能会在这里受到 CSS 纯粹主义者的抨击，但使用 100% 宽度和高度的表格可以在任何浏览器中工作，并且不需要特定于浏览器的 CSS hack。

回复收藏 0 原文

〃安静 2024-07-15 10:25:22

您也可以使用


<div style='position:absolute;top:0px:left:0px;'>Text</div>;

It 来将 div 堵塞在页面顶部，但如果您的页面向下滚动，它会停留在那里。

You could alternatively use


<div style='position:absolute;top:0px:left:0px;'>Text</div>;

It will jamm the div on the top of the page, but if your page scrolls down it will stay there.

回复收藏 0 原文

救赎№ 2024-07-15 10:25:22

Belugabob 的想法是正确的，您正在尝试做的是固定定位，而 IE 6 不支持固定定位。

我修改了本教程底部的示例，它应该可以满足您的需求并支持除了所有优秀的浏览器之外，还有 IE 6+。它之所以有效，是因为 IE 允许您将 Javascript 放入样式声明中：

<style type="text/css">
  div#fixme {
    width: 100%; /* For all browsers */
  }
  body > div#fixme {
    position: fixed; /* For good browsers */
  }
</style>

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
  div#fixme {
    /* IE5.5+/Win - this is more specific than the IE 5.0 version */
    right: auto; bottom: auto;
    left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  }
</style>
<![endif]>
<![endif]-->

<body>
  <div id="fixme"> ...

Belugabob has the right idea that what you are trying to do is fixed positioning, which IE 6 does not support.

I modified an example from the bottom of this tutorial which should do what you want and support IE 6+ in addition to all the good browsers. It works because IE lets you put Javascript in style declarations:

<style type="text/css">
  div#fixme {
    width: 100%; /* For all browsers */
  }
  body > div#fixme {
    position: fixed; /* For good browsers */
  }
</style>

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
  div#fixme {
    /* IE5.5+/Win - this is more specific than the IE 5.0 version */
    right: auto; bottom: auto;
    left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  }
</style>
<![endif]>
<![endif]-->

<body>
  <div id="fixme"> ...

回复收藏 0 原文

~没有更多了~