css - 为所有 parent 设置 100% 高度的有效方法

Question

我想要一个 div 是视口(viewport)的 100% 高度。基本代码是这样的:

http://jsfiddle.net/c247opd6/

现在，在一个真实的网页中，情况会更像这样:

http://jsfiddle.net/akrv5cgm/我的 div 嵌套在其他一些 div 中。

我知道第二个示例的代码不起作用，因为为了使元素具有其父元素高度的 100%，其父元素必须具有明确定义的高度或为其元素高度的 100% parent 。修复:

.four, .three, .two {
      height: 100%;
}

但是，一旦您开始添加代码，此解决方案就会变得越来越难以维护。是否有更短的 css 规则允许我为所有父 div 设置 100% 高度？像第 n 个 child ，除了 parent 。

Answer 1

I want a div to be 100% height of the viewport.

您可以使用视口(viewport)相对单位:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

在这种情况下，您将使用 height: 100vh，其中 1vh 相当于视口(viewport)的 1%。

Updated Example

.one {
    height: 100vh;
    background-color: red
}

浏览器对这些单位的支持可以是found here .

值得指出的是，该元素不会考虑其直接父元素的高度。