为所有父母设置100％身高的有效方法

Question

我希望div为视口的100％高度。基本代码是：

http://jsfiddle.net/c247opd6/

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

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

我知道第二个例子的代码不起作用，因为为了使一个元素具有100％的父元素高度，它的父元素必须具有明确定义的高度或高度的100％它的父母。修复：

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

然而，一旦你开始添加代码，这个解决方案变得越来越难以保持。是否有较短的css规则允许我为所有父div设置100％的高度？和父母一样，除了父母。

Answer 1

  

我希望div为视口的100％高度。

您可以使用视口相对单位：

  

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

     

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

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

Updated Example

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

这些单元的浏览器支持可以是found here。

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