web-dev-qa-db-ja.com

コンテナDIVの高さをウィンドウの高さの100％に設定するにはどうすればよいですか？

コンテナDIVにはいくつかの問題があります。 1つは、コンテンツの高さを正しく認識していないことです（メインコンテンツとサイドバーの下部を超えて広がると考えていましたが、そうではありませんでした）。 このページ で私が意味することを見ることができます。

また、コンテナDIVが常に画面/ウィンドウの利用可能な高さを満たすようにしたいと思います。 min-height:100%に設定しようとしましたが、これは効果がありませんでした。

コンテナDIVに使用しているCSSは次のとおりです。

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

これを機能させるための助けに感謝します。

おかげで、

ニック

heightcss
21
Nick

これをcssに追加します。

html, body {
    height:100%;
}

Height：100％と言う場合、「親要素の100％」を意味します。親要素の高さが指定されていない場合、何も起こりません。 bodyに100％のみを設定しますが、htmlに追加する必要もあります。

48
ptriek

高さを表示するようにネット設定できます

html, body
{
    height: 100vh;
}
7
Nicky Thomas

CSSを設定しましたか：

html, body
{
    height: 100%;
}

これは、divがすべてのスペースを占有できるようにするために必要です。 :)

7
Kyle
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

html height (%)はheightが100%のscreen viewよりも大きいドキュメントの高さを処理し、body view height (vh)は処理しますスクリーンビューの高さよりも低いドキュメントの高さ。

4
Blix

私はこれについて考え、要素の高さを試しています：html、body、div。最後に、コードを思いつきました：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height question</title>
<style>
        html {height: 50%; border: solid red 3px; }
        body {height: 70vh; border: solid green 3px; padding: 12pt; }
        div {height: 90vh; border: solid blue 3px; padding: 24pt; }
        
</style>
</head>
<body>

        <div id="container">
                <p>&lt;html&gt; is red</p>
                <p>&lt;body&gt; is green</p>
                <p>&lt;div&gt; is blue</p>
        </div>

</body>
</html>

私のブラウザ（Firefox 65 @ mint 64）では、3つの要素はすべて1）異なる高さ、2）すべてが以前のものより長い（htmlは50％、bodyは70vh、div 90vh）。また、htmlタグとbodyタグに関して、高さのないスタイルをチェックしました。うまくいきました。

CSSユニットについて： w3schools：CSS units

ビューポートに関するメモ：「ビューポート=ブラウザウィンドウのサイズ。ビューポートの幅が50cmの場合、1vw = 0.5cm。」

0
khaz