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％的高度，否则任何子元素将始终只与其父元素一样高。

My JSFiddle显示

html {
  height: 100%;
}

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

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

纯CSS的100％屏幕高度

3 个答案: