css - CSS 粘性页脚，页眉位于页面换行之外

Question

所有粘性页脚都要求您将除页脚之外的所有内容放在页面换行中。我有一种情况，标题必须位于页面换行之外：

<div id="header">...</div>
<div id="page-wrap">...</div>
<div id="footer">...</div>

任何人都知道在这种情况下 CSS 的附录是什么？

Answer 1

不会像以下工作吗？

<div id="page-wrap">
  <div id="header">Header stuff</div>
  <div id="contents">Actual page innards</div>
</div>
<div id="footer">Footer text</div>

您没有提供太多细节，但我猜您希望某种格式不适用于#header。解决方案是将格式放在#contents 上，而不是#page-wrap。事实上，不要在#page-wrap 上放置任何格式，除了将页脚向下推所需的格式。

Answer 2

我使用了第二个包装类来制作粘性页眉和页脚。虽然粘性页眉在包装器内可以正常工作，但有很多建议的解决方案来解决页脚不粘着的问题。

我发现其中一些解决方法导致了标题问题。在尝试了许多建议的解决方法后，我发现将两者都放在它们自己的类包装器中，并具有与原始包装器完全相同的属性，这使得它们都与页面的其余部分粘在一起，同时需要最少的代码。

Answer 3

试试这个链接

使用 CSS 属性 position:fixed 可以轻松完成粘性页眉和页脚。