我以前从未接触过 CSS，但现在我不得不接触了。我正在开发一些 HTML 代码——一个网站的草图，但 CSS 有问题。我希望我的标题位于固定位置，我的意思是它应该始终位于网站的顶部，即使内容太多以至于必须滚动网站才能看到所有内容。我试过 somethig，但它不能正常工作。
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>如果你还不明白我的意思，我在这里提供链接with fixed, witout fixed
当然，我正在寻找的是一个很好的解决方案，没有不必要的代码(甚至 CSS 和 JS)。需要注意的是，没有一个元素，尤其是 header 没有固定高度!
最佳答案
如果我对您的问题的理解正确，您希望将以下 CSS 添加到页眉以使其位于页面顶部:
top: 0px;
然后，使用 div#content，给它一个上边距以将其向下推到标题之外:
margin-top: 200px;
所以你的 CSS 最终看起来像这样:
header {
border: 2px solid red;
position: fixed;
width: 100%;
top: 0px;
}
#content {
border: 2px solid black;
margin-top: 200px;
}
关于css - 固定页眉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8326665/