html - 如何将 div 拉伸(stretch)为文档主体的高度，而不是视口(viewport)的高度？ (包含代码)

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

仔细看...您的 body 元素不是内容的全高。移除 height: 100% 并将 position: relative 添加到 body 元素。这是 fiddle 的一个分支:

http://jsfiddle.net/7j8vrnr8/

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

position: relative