html - 高度为 100% 且带有粘性页脚的嵌套 div

Question

http://jsfiddle.net/4ZC2A/

我试图让我的白色包装 div 具有 100% 的高度，而不弄乱我的粘性页脚。我试过删除 height: auto !important 所以我的包装 div 将扩展 100%，但这弄乱了我的粘性页脚。它还会导致页脚在调整大小时与图片重叠。感谢您的帮助，谢谢。

.supercontainer {
    min-height: 100%;
    height: 100%;
    height: auto !important;
    margin: 0 auto -100px;
  position: relative;
  background: #f8f8f8;
  }
.wrapper {
  border-right: 2px solid #e5e5e5;
  border-left: 2px solid #e5e5e5;
  background: white;
  margin: 0 auto;
  width: 1200px;
  height: 100%;
  padding-top: 50px;
 }

Answer 1

这是您的 fiddle 的工作副本。请不要使用 display:table

DEMO

您的代码需要一些网站架构。至于 wrapper 与页脚重叠，如果你的意思是滚动时在它下面，那么，它必须去某个地方。毕竟你确实想要修复它。

当固定页脚(粘性)时，您必须了解页面将到达其底部并且页脚将在那里阻挡它。所以你给页面一个 margin-bottom 作为页脚的大小来强制页面像这样自下而上

.wrapper {
   margin: 0 auto 100px auto;
 }