css - 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 倍.