css - 純粋な CSS を使用した 100% の画面の高さ

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 倍になります。 .