为所有父母设置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。

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