我以前从未处理过 CSS，但现在我必须处理。我正在开发一些 HTML 代码 - 一个网站的草图，并且有 CSS 问题。我希望我的标题位于固定位置，我的意思是它始终应该位于网站的顶部，即使有太多内容以至于网站必须滚动才能看到所有内容。我尝试过一些东西，但它不能正常工作。
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>
如果你还是不明白我的意思，我在这里提供链接与固定， 无固定
当然，我正在寻找一个很好的解决方案，没有不必要的代码（甚至 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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
