固定页眉答案

【问题标题】：Fixed Page Header固定页眉
【发布时间】：2012-01-09 17:33:19
【问题描述】：

我从未处理过 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 &nbsp; | &nbsp; Registration
          </div>
          <div id="logo-bar">
        	LOGO
          </div>
          <div id="main-menu-bar">
                MenuItem1 &nbsp; | &nbsp; MenuItem3 &nbsp; | &nbsp; 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 没有固定的高度！

【问题讨论】：

您希望标题始终固定在浏览器窗口的顶部，但是当窗口滚动时，要 onyl 的内容会在它下面，对吗？

标签： css fixed

【解决方案1】：

如果我正确理解您的问题，您希望将以下 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;
}

【讨论】：

感谢您的回复。但为什么在 #content { margin-top: 200px } 中？我说标题没有固定的高度，所以如果标题的高度例如为 250px，那么这个灵魂就失败了。
这是这种技术的一个缺点。因为position: fixed 元素已从正常流程中删除，所以您必须手动将内容放置在它们下方。你不能以其他方式做到这一点。
我已经尝试过您提出的解决方案。我只是好奇是否可以通过绕过固定高度属性来获得我需要的东西。我不知道怎么做，但我有预感，一些 css 大师会这样做：D 不过，thanx！
没问题。我实际上正在使用类似布局的网站，是的，不必在每个像素的基础上做事情会很棒！

【解决方案2】：

为标题添加固定高度，并为内容的顶部填充使用相同的值。

见http://jsfiddle.net/DmLkQ/

如果你不想固定高度，请使用 jQuery：

http://jsfiddle.net/DmLkQ/5/

【讨论】：

好的，这不是我正在寻找的完美解决方案。我的意思是我已经尝试过了，但我不喜欢标题具有固定高度的事实。不过，谢谢你:)
啊，那不可能 - 正如@JamWaffles 提到的那样。不过，您可以使用 jQuery 来做到这一点，首先检查标题的高度，然后将此高度传递给 padding-top...

【解决方案3】：

这应该适合你：

header {
    position: absolute;
    top: 0px;
    width: 100%;
    border: 2px solid red;
}

【讨论】：