纯粹的CSS 100％屏幕高度

Question

这应该很简单，但我无法弄清楚。我已经标记像这样：

<section id="container"> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
</section> 

我怎样才能获得每篇文章用纯CSS是窗口的整个高度，并且没有JS？

Answer 1

你应该确保的HTML，身体和#container的标签也以100％的高度：

html, body, #container { 
    height: 100%; 
} 

例子：http://jsfiddle.net/aXPwL/1/

Answer 2

<section id="container" style="height:100%"> 
    <article style="height:100%;"></article> 
    <article style="height:100%;"></article> 
    <article style="height:100%;"></article> 
    <article style="height:100%;"></article> 
</section> 

Answer 3

所有元素开始从HTML层叠下降文章元素需要指定100％的高度，否则任何子元素将始终只与其父元素一样高。

My JSFiddle表明

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 
section { 
    height: 100%; 
} 
article { 
    background: blue; 
    width: 100%; 
    height: 100%; 
} 

还要注意，不知道这是你想要的，但由于物品并非堆放在彼此的顶部，用户将不得不向下滚动才能看到所有4篇文章，使得实际页面高度是浏览器窗口高度的4倍。