具有固定页眉的真正粘性页脚？答案

【问题标题】：A true sticky footer with a fixed header?具有固定页眉的真正粘性页脚？
【发布时间】：2014-03-02 13:48:19
【问题描述】：

首先，请阅读整个问题，以便您完全理解我在寻找什么，谢谢！

这是我一直在尝试研究很长时间的一个问题，并且已经让我放弃了一段时间。我可以有一个带有固定页眉的真正粘性页脚吗？

如何实现带有固定页眉的粘性页脚？我不能为正文或内容添加填充或边距，因为这会破坏页脚。另外，我希望能够在我的内容中使用width:100% 和height: 100%，而不会溢出并造成混乱。

这是我的目标（请原谅我出色的 Photoshop 技能）：

当我在页脚上使用 position:fixed; 和 bottom:0; 时，这看起来不错。但要使其真正具有粘性，我需要在我的页面中添加一些 CSS。（来自：http://css-tricks.com/snippets/css/sticky-footer/）

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

这让我有一个看起来很棒的粘性页脚，但问题就在这里。部分内容位于我的固定导航栏下方。

我无法为正文、html 或内容添加填充或边距，因为这会使粘性页脚混乱。如果没有 CSS “Hacks”，我有什么办法可以做到这一点？

这是与标题下的内容：http://jsfiddle.net/g2ydV/3/

看起来不错！但有些内容隐藏在标题下？让我们通过为内容添加边距来解决这个问题：http://jsfiddle.net/g2ydV/2/

上面的例子有效，但是页脚搞砸了。我怎样才能在不弄乱我的粘性页脚的情况下实现这种效果？

【问题讨论】：

在您的第一个示例中，我没有看到任何隐藏在您的标题下的内容，看起来它正在按照您的要求工作。我误解了这个问题吗？
@badAdviceGuy 对不起，我应该让自己更清楚。文本，我做了下拉，所以你可以阅读它。让我快速修复它。如果您在 Google Chrome 上进入 Inspect Element，您可以看到它是。
@badAdviceGuy jsfiddle.net/g2ydV/3
这是您要找的吗？ jsfiddle.net/g2ydV/7 我刚刚在您的内容中添加了另一个 div 块，以将您的所有常规内容向下推送，就像固定标题一样。
@ntgCleaner 是的，这很好，但为什么内容在到达之前将页脚向下推？

标签： html css footer sticky-footer

【解决方案1】：

一种可能的解决方案是将您的 content:after 交换为 content:before。

Working Demo

CSS：

/* .content:after {
     content: "";
     display: block;
} */

.content:before {
 content: "";
 display: block;
 height: 45px;
}

【讨论】：

哇，完美！一个问题。当内容从未到达页脚顶部时，为什么页脚开始向下滚动？
您已将内容的高度设置为 300 像素。如果您删除它，那么内容将仅与内容一样高。
好的，太棒了。有什么办法可以扩展内容以填充该空间的其余部分？
并非没有很多诡计。我建议使用 Ryan Fait 的粘性页脚解决方案 ryanfait.com/sticky-footer。然后您就可以摆脱占用所需空间的内容
我发现你需要.content:before和.content:after

【解决方案2】：

还有另一种使用display: table; 和display: table-cell 的方法，似乎越来越流行。

我只是把它作为一个值得一看的替代方案。它非常干净，不需要为页眉和页脚定义任何高度，这很好。

HTML

<div id="wrap">
  <div id="wrap-inner">

    <div class="navbar">
      <span>Fixed Header (content under here)</span>
    </div>

    <div class="content">
      <p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
    </div>

    <div class="footer">
      <span>Sticky footer!</span>
    </div>

  </div>
</div>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
}

#wrap {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#wrap-inner {
  vertical-align: middle; /* optional for positioning content in the middle */
  display: table-cell;
}

.navbar, .footer {
  position: fixed;
  width: 100%;
}

.navbar {
  top: 0;
  width: 100%;
}

.footer {
  bottom: 0;
}

Demo

【讨论】：

粘性页脚并不意味着fixed 页脚。一旦内容变得更大，我希望页脚与页面一起下降。
你可以绝对定位它，相对于#wrap-inner。虽然我意识到定义导航栏的高度是不可避免的，但它只是在这里工作，因为内容段落的边距。尽管如此，只有导航栏高度需要定义，而不是页脚。 jsfiddle.net/davidpauljunior/g2ydV/9

【解决方案3】：

固定标题是我的决定

html {
    position: relative;
    min-height: 100%;
}

#main-container {
    padding-top: 55px; /*  this is header height  */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

【讨论】：

【解决方案4】：

body {
  margin: 0;
  padding:0;
  line-height: normal;
  height: 100%;
  overflow: hidden;
}

.header {
  background:#3d5084;
  padding: 16px 0 16px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-middle-container {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: calc(100vh - 150px);
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  background: #f1f1f1;
}

 .footer {
   background: #3d5084;
   padding: 11px 25px;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   position: relative;
   z-index: 1;
}

Demo link

【讨论】：