粘性页脚和 100% 高度 - 强制 div 获得 100% 高度 [重复]

【问题标题】：Sticky footer & 100% height - force div to get 100% height [duplicate]粘性页脚和 100% 高度 - 强制 div 获得 100% 高度 [重复]
【发布时间】：2014-09-20 20:35:30
【问题描述】：

请看代码： http://jsbin.com/jeduvowa/1/

如何强制粉色 div 获得 100% 的高度（div 应该触摸页脚，即使它不包含足够的内容）

【问题讨论】：

标签： css height sticky-footer

【解决方案1】：

您必须简单地将height: 100; 设置为body、html 和content。你正在用height: auto !important; 覆盖height: 100%;。

或者，如果您希望内容可增长，您可以创建两个层。一个带有内容，第二个带有背景。

【讨论】：

【解决方案2】：

你可以这样做：

HTML：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.header {
  background: red;
}
.wrapper {
    height: 100%;
    margin: 0 auto -40px;
    background: gray;
}
.content {
  width: 200px; 
  margin: 0 auto; 
  background: pink; 
  height: calc(100% - 18px); /*100% - the height of the header*/
}

.footer {
  background:green;
}
.footer {
    height: 40px;
}

【讨论】：

看起来很有趣，但是当您调整窗口内容的大小时，文本会与页脚重叠。