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

发布时间：2020-12-14 22:22:09 所属栏目：资源来源：网络整理

导读：如何在没有两组滚动条的网页上创建看起来像MS Office 2007功能区的非滚动div。一个为窗口和一个为div。解决方法尝试这个： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"htm

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

解决方法

尝试这个：

<!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的大小填满标题下方的空格。这通过设置顶部和底部位置并使高度未设置来在大多数浏览器中实现。结果是，div的顶部固定在标题下方，并且div的底部将始终伸展到屏幕的底部。

当然，总是有IE6，以确保我们赚到我们的工资。在版本7之前，IE不会从冲突的绝对位置得出维度。 Some people使用IE的css表达式来解决IE6的这个问题，但是这些表达式字面上可以评估每个mousemove，所以我只是调整大小事件上的#main div大小，并使用条件注释从其他浏览器中隐藏javascript块。

将宽度设置为99％的线条和将setTimeout设置为100％的线条修复了IE6中的一些渲染奇怪性，当您调整窗口大小时会导致水平滚动条偶尔出现。

注意：您必须使用doctype，并将IE从奇怪的模式中移除。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!