CSS 粘性页脚，页眉位于页面换行之外 [关闭]答案

【问题标题】：CSS sticky footer with header outside the page wrap [closed]CSS 粘性页脚，页眉位于页面换行之外 [关闭]
【发布时间】：2012-12-16 07:42:58
【问题描述】：

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

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

有人知道在这种情况下 CSS 的附录是什么吗？

【问题讨论】：

你能解释一下你试图在包装器之外做什么 requires 标头吗？
你的page-wrap CSS 现在是什么样子的？这只是一个调整。
为什么你的标题需要在你的页面换行之外？我确信还有另一种方法可以在页面换行中使用标题来实现您的目标。
如 Wordpress 主题，其中get_header() 将需要 header.php。然而，这个 php 通常也包含<head>。对此进行编辑可能需要一些时间。

【解决方案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 上设置任何格式，除了将页脚向下推所需的格式。

【讨论】：

【解决方案2】：

试试这个link

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

【讨论】：

【解决方案3】：

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

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

【讨论】：