19

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

4

5 回答 5

15

尝试这个：

<!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>

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

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

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

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

于 2008-11-03T15:20:45.263 回答
8

使用具有 100% 宽度和高度的固定位置<div>元素z-index。

您还需要确保滚动内容的开头不会被 fixed 遮挡<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>和第二个的上边距，需要根据您的需要进行调整。

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

于 2008-11-02T12:14:24.173 回答
4

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

于 2008-11-04T09:03:56.240 回答
0

您也可以使用


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

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

于 2008-11-02T12:52:16.467 回答
0

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"> ...
于 2008-11-03T11:40:11.200 回答