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

Question

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

Answer 1

试试这个：

<!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 的顶部固定在 header 的下方，而 div 的底部会一直拉伸到屏幕底部。

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

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

注意：您必须使用 doctype 并让 IE 退出 quirks 模式。

Answer 2

使用固定位置的<div> 元素，其宽度为100%，高度为z-index。

您还需要确保滚动内容的开头不会被固定的<div> 遮挡，直到您开始向下滚动，方法是将其放入另一个<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>

请注意第一个<div> 的高度和第二个的上边距，需要根据您的需要进行调整。

附：由于某种原因，这在 IE7 中不起作用，但这是一个很好的起点，而且我相信您可以在这个主题上做出一些变化，以您想要的方式工作。

Answer 3

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

Answer 4

你也可以使用

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

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

Answer 5

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

我从this tutorial 的底部修改了一个示例，除了所有好的浏览器之外，它应该可以满足您的需求并支持 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"> ...