web-dev-qa-db-ja.com

HTMLセクション100％ビューポートの高さ

セクション（5）で1ページのWebサイトを構築しようとしています。各セクションをウィンドウの幅と高さの100％にしようとしています。そのため、ウィンドウのサイズを変更しても、セクションのサイズはそれに合わせて調整されます。

JavaScriptについて聞いたことがありますが、良い解決策は見つかりませんでした。誰か助けてくれますか？メディアクエリで可能ですか？

javascripthtmlcsswebmedia-queries
30
Nicolas Wilhem

NB：vhはラップトップおよび大きな画面サイズでのみ機能します。モバイル画面ではvhが小さいため、ウェブサイトを表示するブラウザウィンドウと、ブラウザウィンドウの上にあるボリューム、バッテリーなどの項目も考慮されるためです。

これはCSSのみで実行でき、Javascriptは不要です。

正しい方法は、 vhおよびvw units を使用することです。

vh：ビューポートの高さの1/100。

vw：ビューポートの幅の100分の1。

そのため、ビューポートと同じ高さの要素を100％に設定するには、100vhは、あなたが何を望んでいるかを示します。

html,
body {
  height: 100%;
  margin: 0;
}
section {
  height: 100vh;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

あるいは、親htmlおよびbody要素を基準にして要素の寸法を設定する必要があります。 100％の高さが必要です：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
section {
  height: 100%;
  width: 100%;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
52
SW4