带有粘性页眉的粘性页脚？答案

【问题标题】：Sticky footer with sticky header?带有粘性页眉的粘性页脚？
【发布时间】：2012-12-28 18:20:58
【问题描述】：

是否可以用粘性页眉制作粘性页脚？

一切都很好，但是当我应用粘性标题时，我需要制作 body { padding-top: 60px; } 以使其不与内容重叠。那么问题是我的页脚在页面下方。

HTML

<div class="wrap">
  <div class="header">STICKY HEADER</div>
  <div class="content">CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />
  </div>
  <div class="push"></div>
</div>
<div class="footer">STICKY FOOTER</div>

CSS

html, body, .wrap {
  height: 100%;
}
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -60px;
  /* for sticky footer to not go below page */
  padding-top: 60px;
  /* for sticky header to not overlap content */
}
.push, .footer {
  height: 60px;
}
.footer {
  background-color: green;
}
.content {
  background-color: yellow;
}
.header {
  background-color: blue;
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

为什么不直接将padding-top: 60px; 添加到.content 而不是.wrap？

jsFiddle：http://jsfiddle.net/NFpDG/2/

【讨论】：

【解决方案2】：

我自己一直在研究这个问题。我见过很多解决方案，每个解决方案都有问题，通常涉及一些神奇的数字。

因此，我利用各种来源的最佳实践提出了这个解决方案：

http://jsfiddle.net/vfSM3/248/

我想在这里特别实现的是让主要内容在绿色区域内的页脚和页眉之间滚动。

这是简单的css：

html, body {
  height:100%;
  margin:0;
  padding:0;
}
header {
  height: 4em;
  background-color:red;
  position:relative;
  z-index:1;
}
.content {
  background:white;
  position:absolute;
  top:5em;
  bottom:5em;
  overflow:auto;
}
  .contentinner {

}
.container {
  height: 100%;
  margin: -4em 0 -2em 0;
  background:green;
  position:relative;
  overflow:auto;
}
 footer {
   height: 2em;
   position:relative;
   z-index:1;
   background-color:yellow;
}

【讨论】：