一个真正的粘页脚固定头？一个真正的粘页脚固定头？(A true sticky footer with

首先，请阅读这整个问题，这样你就可以完全明白我期待的，谢谢！

这是一个问题，我一直在试图研究一个伟大的时间，现在，已经难倒我要退出了一会儿。 我可以有一个固定的头一个真正的粘页脚？

我如何能实现用一个固定的头一个棘手的注脚？ 我不能添加填充或保证金不足对身体或内容，因为这将打破页脚。 此外，我希望能够使用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“黑客”？

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

看起来不错吧！但有些内容是标题下隐藏？ 让我们解决这个问题藉由将边缘的内容： http://jsfiddle.net/g2ydV/2/

上面的例子的作品，但在页脚搞砸。 我怎样才能做到不搞乱我的粘页脚这种效果呢？

Answer 1:

一个可能的解决方案是要交换content:after到content:before 。

工作演示

CSS：

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

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

Answer 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;
}

演示

Answer 3:

这是我的固定头部的决定

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

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

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

文章来源: A true sticky footer with a fixed header?