100%屏幕高度与纯CSS

Question

这应该很简单，但是我想不出来。我有这样的标记:

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

我怎样才能得到每篇文章是使用纯CSS，而不是JS窗口的全部高度?

Answer 1

你应该确保html, body和#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开始到article元素的所有元素都需要指定100%的高度，否则任何子元素的高度都只能与其父元素一样高。

我的JSFiddle显示

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

还请注意，不确定这是否是您想要的，但由于文章不是堆叠在一起的，用户将不得不向下滚动才能看到所有4篇文章，使实际页面高度是浏览器窗口高度的4倍。