如何在没有两组滚动条的情况下在 HTML 页面顶部创建非滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/256811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you create non scrolling div at the top of an HTML page without two sets of scroll bars
提问by
How do you create non scrolling div that looks like the MS Office 2007 ribbon on a web page without two sets of scroll bars. One for the window and one for the div.
如何在没有两组滚动条的情况下在网页上创建看起来像 MS Office 2007 功能区的非滚动 div。一个用于窗口，一个用于 div。
回答by Prestaul
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 #maindiv to size to fill the space below the header. This is accomplished in most browsers by setting both the topand the bottompositions and leaving the heightunset. 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.
基本上，您正在做的是从正文中删除滚动条并将滚动条应用于文档内的元素。那很简单。诀窍是让#maindiv 调整大小以填充标题下方的空间。这在大多数浏览器中是通过设置top和bottom位置并保持未height设置来实现的。结果是 div 的顶部固定在标题下方，而 div 的底部将始终拉伸到屏幕底部。
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 peopleuse IE's css expressions to solve this problem for IE6, but these expressions literally evaluate on every mousemove, so I'm simply resizing the #maindiv on the resize event and hiding that block of javascript from other browsers using a conditional comment.
当然，那里总是有 IE6 来确保我们赚取薪水。在版本 7 之前，IE 不会从冲突的绝对位置中导出尺寸。 有些人使用 IE 的 css 表达式来解决 IE6 的这个问题，但这些表达式在每次鼠标移动时都会进行计算，所以我只是#main在 resize 事件上调整 div 的大小，并使用条件注释从其他浏览器中隐藏该 javascript 块。
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.
将宽度设置为 99% 的行和将其设置回 100% 的行修复了 IE6 中的一点渲染怪异现象，这会导致在调整窗口大小时偶尔出现水平滚动条。
Note: You must use a doctype and get IE out of quirks mode.
注意：您必须使用 doctype 并使 IE 退出怪癖模式。
回答by belugabob
Use a fixed position <div>element, that has 100% width and a high z-index.
使用固定位置<div>元素，具有 100% 宽度和高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.
您还需要确保滚动内容的开头不会被固定<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>
Note the the height of the first <div>, and the top margin of the second, will need to be adjusted to suit your needs.
请注意，第一个的高度<div>和第二个的上边距需要根据您的需要进行调整。
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.
PS：出于某种原因，这在 IE7 中不起作用，但它是一个很好的起点，我相信您可以对这个主题进行一些修改，以您希望的方式工作。
回答by Filini
I will probably be bashed by CSS purists here, but using a table with 100% width and height works in any browser, and does not require browser-specific CSS hacks.
我可能会在这里受到 CSS 纯粹主义者的抨击，但使用 100% 宽度和高度的表格适用于任何浏览器，并且不需要特定于浏览器的 CSS hack。
回答by Nikola Stjelja
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.
它会卡住页面顶部的 div，但如果您的页面向下滚动，它将停留在那里。
回答by joelhardi
Belugabob has the right idea that what you are trying to do is fixed positioning, which IE 6 does not support.
Belugabob 有正确的想法，您正在尝试做的是固定定位，IE 6 不支持。
I modified an example from the bottom of this tutorialwhich 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:
我修改了本教程底部的一个示例，除了所有好的浏览器外，它应该可以满足您的需求并支持 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"> ...
