如何将div拉伸为文档正文的高度，而不是视口？ （包含代码）

Question

我见过的所有示例都说要执行以下代码，但这样做不有效（请参阅下面的jsfiddle）。

html { height: 100%; min-height: 100%; }
body { height: 100%; min-height: 100%; }
.stretchable { position: absolute; width: 100px; height: 100%; min-height: 100%; }

显示无效：http://jsfiddle.net/yVDXQ/481/

如何仅使用CSS强制div成为文档正文的高度，而不是窗口？

Answer 1

仔细看看......你的身体元素不是内容的全部高度。删除 height：100％，然后将 position：relative 添加到body元素。这是小提琴的一个分支：

http://jsfiddle.net/7j8vrnr8/

请记住，在向上移动层次结构时，绝对定位元素的高度/宽度基于第一个相对定位元素。

position: relative

Answer 2

首先，您需要删除height:100%的{​​{1}} - 否则主体将仅与视口一样高（其余内容溢出）。

然后，由于您的body元素绝对定位，您只需从中完全删除任何高度和最小高度（以便有效.stretchable） - 并将其从{ {1}} 和 height:auto，以便这两个值确定其高度。 （top添加bottom，以便将此元素作为绝对定位的参考点。

http://jsfiddle.net/yVDXQ/484/