CSS 固定页眉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8326665/
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
Fixed Page Header
提问by biera
I've never dealt with CSS but now I have to. I'm developing some HTML code - a sketch of a website and have a problem with CSS. I would like to have my header in a fixed position, I mean it always should be on the top of the site, even if there is so much content that site has to be scrolled to see everything. I've tried somethig, but it does not work properly.
我从来没有处理过 CSS，但现在我必须处理。我正在开发一些 HTML 代码 - 一个网站的草图，但 CSS 有问题。我想让我的标题处于固定位置，我的意思是它应该始终位于网站的顶部，即使内容太多以至于必须滚动网站才能看到所有内容。我试过一些东西，但它不能正常工作。
HTML:
HTML：
body {
margin: 0px 0px 0px 0px;
}
header {
border: 2px solid red;
position: fixed;
width: 100%;
}
#top-menu-bar {
border: 1px dashed red;
padding: 15px;
text-align: right;
}
#main-menu-bar {
border: 1px dashed red;
padding: 15px;
}
#logo-bar {
border: 1px dashed red;
padding: 35px;
}
#content {
border: 2px solid black;
}
footer {
border: 2px solid blue;
padding: 15px;
} <html>
<head>
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
</head>
<body>
<header>
<div id="top-menu-bar">
Login | Registration
</div>
<div id="logo-bar">
LOGO
</div>
<div id="main-menu-bar">
MenuItem1 | MenuItem3 | MenuItem3
</div>
</header>
<div id="content">
<h1>
Content
</h1>
<p>
Some content<br/>
</p>
</div>
<footer>
Footer
</footer>
</body>
</html>if you still do not get it what I mean, here I provide links with fixed,witout fixed
Of course, what I'm looking for is nice a solution, without unnecessary code (even CSS and JS). It is important to note that no one element, especially header has not fixed height!
当然，我正在寻找的是一个很好的解决方案，没有不必要的代码（甚至是 CSS 和 JS）。需要注意的是，没有一个元素，尤其是header没有固定的高度！
回答by Bojangles
If I understand your problem correctly, you want to add the following CSS to your header to make it stay at the top of the page:
如果我正确理解您的问题，您希望将以下 CSS 添加到您的页眉中，使其保持在页面顶部：
top: 0px;
Then, with div#content, give it a top margin to push it down out of the header's way:
然后，使用div#content，给它一个上边距以将其推下标题的方式：
margin-top: 200px;
So your CSS ends up looking like this:
所以你的 CSS 最终看起来像这样：
header {
border: 2px solid red;
position: fixed;
width: 100%;
top: 0px;
}
#content {
border: 2px solid black;
margin-top: 200px;
}
回答by ptriek
Add fixed height to header, and use the same value for padding-top of content.
为标题添加固定高度，并为内容的 padding-top 使用相同的值。
See http://jsfiddle.net/DmLkQ/
If you don't want fixed height, use jQuery:
如果您不想要固定高度，请使用 jQuery：
回答by Pastor Bones
This should work for you:
这应该适合你：
header {
position: absolute;
top: 0px;
width: 100%;
border: 2px solid red;
}
