固定页面标题 [英] Fixed Page Header
问题描述
我从没处理过CSS，但现在必须这样做.我正在开发一些HTML代码-网站的草图，并且CSS有问题.我想将标题固定在一个固定的位置，我的意思是，标题应该始终位于网站顶部，即使有太多内容，也必须滚动网站才能看到所有内容.我已经尝试过somethig，但是它不能正常工作.
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.
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
当然，我正在寻找的是一个很好的解决方案，没有不必要的代码(甚至CSS和JS).重要的是要注意，没有一个元素，尤其是标头没有固定的高度！
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添加到标题中，以使其位于页面顶部:
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:
top: 0px;
然后，用div#content，给它一个上边距，以将其向下推到页眉之外:
Then, with div#content, give it a top margin to push it down out of the header's way:
margin-top: 200px;
所以您的CSS最终看起来像这样:
So your CSS ends up looking like this:
header {
border: 2px solid red;
position: fixed;
width: 100%;
top: 0px;
}
#content {
border: 2px solid black;
margin-top: 200px;
}
这篇关于固定页面标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
