粘性页脚＆amp; 100％高度 - 强制div获得100％高度

Question

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

如何强制粉红色div获得100％高度（即使内容不足，div也应触摸页脚）

Answer 1

您必须将height: 100;设置为body，html和content。 您正在height: 100%;覆盖height: auto !important;。

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

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