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

Question

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

如何在没有两组滚动条的网页上创建看起来像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>

Run Code Online (Sandbox Code Playgroud)

基本上,您正在做的是从正文中删除滚动条并将滚动条应用于文档内的元素.这很简单.诀窍是让#maindiv的大小填充标题下面的空格.这在大多数浏览器中通过设置top和bottom位置并保留未height设置来实现.结果是div的顶部固定在标题下方,div的底部将始终延伸到屏幕的底部.

当然,总有IE6可以确保我们赚取薪水.在版本7之前,IE不会从冲突的绝对位置导出维度. 有些人使用IE的css表达式来解决IE6的这个问题,但是这些表达式实际上是对每个mousemove进行评估,所以我只是调整#mainresize事件上的div并使用条件注释从其他浏览器中隐藏javascript块.

将宽度设置为99%并将setTimeout设置为100%的行修复了IE6中的一点渲染奇怪现象,导致在调整窗口大小时偶尔出现水平滚动条.

注意:您必须使用doctype并使IE退出怪癖模式.

Answer 2

bel*_*bob 8

使用固定位置<div>元素,宽度为100%,高度为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>

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	17 年，1 月前
查看次数：	87207 次
最近记录：	12 年，9 月前