2140

左divと右の2列のレイアウトがありますdiv。

右側divには灰色background-colorがあり、ユーザーのブラウザウィンドウの高さに応じて垂直方向に拡大する必要があります。現在、background-colorその最後のコンテンツで終了していdivます。

私が試したheight:100%、min-height:100%;など、

html css height

— マイク
ソース

7

あなたはこの質問の有用な見つけることがstackoverflow.com/questions/1366548/...

— イワンNevostruev

良い方法ですが、vh、vwなどのユニットはバグがあることが知られています。必要に応じて、この軽量のjsの代替案があります：joaocunha.github.io/vunit

— より鮮明な

ここではCSSののシンプルかつ明確な説明ですheightパーセント値を持つプロパティ：stackoverflow.com/a/31728799/3597276

— マイケル・ベンジャミン

4

高さを使用できます：100vh; cssプロパティ

— Vishnu Chauhan 2018

2833

次の2つのCSS 3測定単位があります。

ビューポートのパーセンテージ（またはビューポートの相対）の長さ

ビューポートのパーセンテージの長さとは何ですか？

上記のリンクされたW3 Candidate Recommendationから：

ビューポートのパーセンテージの長さは、最初の包含ブロックのサイズを基準にしています。最初の包含ブロックの高さまたは幅が変更されると、それらはそれに応じてスケーリングされます。

これらの単位は、vh（ビューポートの高さ）、vw（ビューポートの幅）、vmin（ビューポートの最小長）、vmax（ビューポートの最大長）です。

これを使用して、ブラウザの高さを仕切りで埋めることができますか？

この質問では、vh：1vhがビューポートの高さの1％に等しいことを利用できます。つまり100vh、要素がDOMツリーのどこに配置されているかに関係なく、はブラウザウィンドウの高さに等しくなります。

HTML

<div></div>

CSS

div {
    height: 100vh;
}

これが文字通り必要なすべてです。ここでJSFiddle例の使用でこれを。

これらの新しいユニットをサポートしているブラウザは何ですか？

これは現在、Opera Miniを除くすべての最新の主要ブラウザーでサポートされています。詳細については、「使用できます...」をご覧ください。

これを複数の列でどのように使用できますか？

手近な質問の場合は、左と右の分周器を備え、ここにあるJSFiddle例の両方を含む2列のレイアウトを示すvhとしますvw。

とはどう`100vh`違うの`100%`ですか？

このレイアウトを例にとります：

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

pここでのタグは高さ100％に設定されていますが、含まれるdiv高さは200ピクセルであるため、200ピクセルの100％は高さの100％ではなく 200ピクセルになりbodyます。100vh代わりに使用すると、pタグは高さにbody関係なく100％の高さになりdivます。この付随するJSFiddleを見て、違いを簡単に確認してください！

— ジェームズドネリー
ソース

35

要素が実際にビューポートよりも高い場合のスクロールによる奇妙な動作。コンテナはビューポートの高さを維持し、コンテンツはコンテナから流れ出します。min-height:100vhこれを回避するようです。

— wdm 2013

8

@DGDDこれは、iOS Safari 6以降、Androidブラウザ4.4以降、BlackBerryブラウザ10.0、IEMobile 10.0で機能します。あなたがどのモバイルブラウザを参照しているかはわかりませんが、これらの4つは使用されているモバイルブラウザの90％以上を占めています。この質問は、モバイルブラウザーで作業するための要件を指定していません。

— James Donnelly、2014

1

@ robross0606再び、私がここで答えた質問ではありません。：その答えは確かにフレキシボックスを使用しない全く別の質問、ということstackoverflow.com/questions/90178/...

— ジェームズ・ドネリー

1

@JamesDonnellyはい、知っています。しかし、それはこの質問に対する答えではありません。ブラウザーウィンドウの高さには、ナビゲーションバーの高さが含まれます。モバイルブラウザでは、ナビゲーションバーが表示/非表示になるたびにビューポートの高さが変わるため、これはより良い方法です。

— RedClover

3

モバイルアラート：ナビゲーションバーを考慮しないChromeモバイルでのvh messの使用。次に、ページの上部を覆います。そこにメニューがある場合の深刻な問題...

— Offirmo

568

あなたはの高さを設定したい場合<div>、または任意の要素を、あなたはの高さに設定する必要があり<body>と<html>あまりにも100％にします。次に、要素の高さを100％に設定できます。

次に例を示します。

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— アリオナリアン
ソース

109

私が間違っている場合は修正してください。ただし、実際に機能させるには、divのすべての親に高さを設定する必要があると思います

— Dany Y

これは、継続的なデザインを使用している場合は機能しません。ページを表すブロックを含む高さ6000pxのページ。1つのブロックを正確にビューポートの高さにします。

— Qwerty、

@DanyY、あなたは正しい。divのすべての親に高さを設定する必要があります。これは、すべてのものが画面の高さを持つことを意味します。ここでの例。

— toto_tico 2014年

このトリックは一部のケースでは機能しますが、一部のケースでは機能しません。互換性またはより推奨される方法を検索する場合は、上記の@Jamesの回答を表示できます。歓声

— Ariona Rian 2014

8

@Qwerty、ここに解決策があります。ように設定CSS：、html { height: 100%*number of blocks; }、。body { height: 100%;} #div { height: 100%/number of blocks; }あなたは3つのセクションを持っているのであれば、それは次のようになりますhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb

283

要素を完全に配置できる場合は、

position: absolute;
top: 0;
bottom: 0;

それを行うでしょう。

— Tinister
ソース

16

これは、要素をドキュメントフローから取り出し、その最下位の値を親の高さに固定することで機能します。コンテンツが親の高さを超える場合、これは理想的ではありません。

— リッキー・ボイス、2014

1

その親の1つがに設定されていてposition:relative、その高さがビューポートの100％でない場合、これは機能しません。それは、次の相対的または絶対的な祖先に上と下を調整します。

— Seika85

141

CSSでビューポートユニットを使用できます。

HTML：

<div id="my-div">Hello World!</div>

CSS：

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

— MrGeek
ソース

1

@Lamarあなたは* { box-sizing: border-box; }それが起こらないようにするために使うべきです。

— Luca Steeb 2017年

2

ビューポートユニットでのブラウザサポートのcaniuseをチェックする価値がある：caniuse.com/#feat=viewport-units

— Dave Everitt

133

vhこの場合、ビューポートの高さの1％を基準にして使用できます...

つまり、高さを隠したい場合は、単にを使用します100vh。

私がここに描いた下の画像を見てください：

以下のように私が作成したスニペットを試してください。

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}

<div class="left"></div>
<div class="right"></div>

スニペットを展開

— アリレザ
ソース

100vhを与えると、ページに垂直スクロールが追加されたため、これに従っても機能しませんでした。stackoverflow.com/questions/44645465/…。垂直スクロールを避けて、divがコンテンツなしで下部に触れるようにする方法はありますか？

— DILEEP THOMAS

@DILEEPTHOMASは既存のものを探すpaddings/margins

— Legends

ルートファイルで@Legendsを* {margin：0、padding：0}として与えようとしましたが、うまくいきませんでした

— DILEEP THOMAS

1

@DILEEPTHOMASは、ここでAlirezaが提供するこの例を見てみましょう。body要素にマージンがあるため、スクロールバーもあります。マージンを削除すると、スクロールバーが消えます。さまざまな原因が考えられますが、これを最初にチェックアウトします。

— Legends

102

他のすべてのソリューション（トップ投票のソリューションを含む）はvh、フレックスモデルソリューションと比較すると、最適ではありません。

CSSフレックスモデルの登場により、100％の高さの問題の解決は非常に簡単になりheight: 100%; display: flex、親flex: 1要素と子要素で使用することができます。コンテナ内の利用可能なすべてのスペースが自動的に使用されます。

マークアップとCSSがいかに単純であるかに注意してください。テーブルハックなどはありません。

フレックスモデルは、すべての主要なブラウザとIE11 +でサポートされています。

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

スニペットを展開

フレックスモデルの詳細については、こちらをご覧ください。

— アイレン
ソース

3

警告：左/右コンテナのいずれかのコンテンツが元のボディの高さを超えると、反対側のコンテナはサイズ変更されないため、コンテナの高さが異なります。

— schellmax

1

Schellmaxが指摘する問題の例：jsfiddle.net/Arete/b4g0o3pq

— Arete

デザインによっては、overflow-y: auto;「元の身長を超える容器」を避けられる場合があります。

— Evi Song

54

次のような重要な詳細については触れません。

レイアウトは固定幅ですか？
列のどちらかまたは両方が固定幅ですか？

これが1つの可能性です。

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}

<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

スニペットを展開

固定する必要があるカラムと液体であるカラムに応じて、これには多くのバリエーションがあります。絶対配置でもこれを行うことができますが、代わりにフロートを使用すると、一般的に（特にブラウザ間の観点から）より良い結果が得られます。

— クレタス
ソース

34

これは私のために働いたものです：

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

スニペットを展開

のposition:fixed代わりにを使用するとposition:absolute、分割を下にスクロールしても画面の最後まで拡大されます。

— マイダ
ソース

この "position：[fixed | absolute]"のコードは、ポップアップの背景（画像をクリックして拡大する場合など）には最適ですが、実際に下にスクロールする必要がある場合はそうではありません。まだ便利な生地！

— Mannyfatboy

29

これが高さの修正です。

あなたのCSSで：

#your-object: height: 100vh;

をサポートしていないブラウザのvh-units場合は、modernizrを使用してください。

このスクリプトを追加します（の検出を追加しますvh-units）

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

最後に#your-object、ブラウザが以下をサポートしていない場合は、この関数を使用してビューポートの高さを追加しますvh-units。

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

— ジョナス・サンシュテット
ソース

24

100% 幅と高さの動作が異なります。

を指定するとwidth: 100%、「親要素またはウィンドウの幅から利用可能な幅の100％を使用する」ことを意味します。

を指定する場合はheight: 100%、「親要素から利用可能な高さの100％を使用する」ことだけを意味します。つまり、最上位要素で高さを指定しない場合、すべての子の0高さは親の高さになるか、最上位の要素にmin-heightウィンドウの高さを設定する必要があるのはそのためです。

私は常にボディの高さを100vhに指定しています。これにより、配置と計算が簡単になります。

body {
  min-height: 100vh;
}

— ディネシュパンディヤン
ソース

16

追加min-height: 100%し、高さを指定しないでください（または自動で配置します）。それは完全に私のための仕事をしました：

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

— レムス・シミオン
ソース

16

100vw ===ビューポートの幅の100％。

100vh ===ビューポートの高さの100％。

設定したい場合 div幅または高さをbrowser-window-sizeの100％次を使用する必要があります。

幅について： 100vw

高さ： 100vh

または、小さいサイズに設定する場合は、CSS calc関数を使用します。例：

#example {
    width: calc(100vw - 32px)
}

— Руслан
ソース

12

aの高さ<div>を100％に設定するには、いくつかの方法があります。

方法（A）：

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

スニペットを展開

vhを使用する方法（B）：

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

スニペットを展開

方法（c）フレックスボックスを使用：

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

スニペットを展開

— サントシュ・カルセ
ソース

12

これは私のために働きました：

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

このページから取得。

— テスト
ソース

12

最も簡単な方法は、このようにすることです。

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

スニペットを展開

— エミロ
ソース

11

＆に設定height:100%してみてくださいhtmlbody

html, 
body {
    height: 100%;
}

また、2 divの高さを同じにするか、親要素のdisplay:flexプロパティを設定する場合。

— モハメッド・ジャベド
ソース

9

ここにすべての答えがあっても、本当に問題を解決できるものがないことに驚きました。100vh height/ を使用したmin-height場合、コンテンツがページより長いとレイアウトが壊れました。代わりに100% height/ を使用した場合min-height場合、コンテンツがページの高さよりも低いとレイアウトが壊れました。

私が見つけた解決策は両方のケースを解決しましたが、上位2つの回答を組み合わせることでした。

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— マシンゴースト
ソース

1

高さが90pxの固定navbarがあるので、「100vh」を「calc（100vh-90px）」に変更する必要がありました

— マークジャクソン

8

ビューポートの高さを意味する「px」の代わりに「vh」ユニットを使用するだけです。

height: 100vh;

— カリフェ
ソース

7

デフォルトでは、ブロック要素は親の全幅を消費します。

これは、垂直に積み重ねるという設計要件を満たす方法です。

9.4.1ブロックフォーマットコンテキスト

ブロックのフォーマット設定のコンテキストでは、ボックスは、包含ブロックの上部から開始して、垂直方向に次々とレイアウトされます。

ただし、この動作は高さにまで及びません。

デフォルトでは、ほとんどの要素はコンテンツの高さ（height: auto）です。

幅とは異なり、余分なスペースが必要な場合は高さを指定する必要があります。

したがって、次の2つの点に注意してください。

全幅が必要でない限り、ブロック要素の幅を定義する必要があります
コンテンツの高さが必要でない限り、要素の高さを定義する必要があります

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

スニペットを展開

— マイケル・ベンジャミン
ソース

7

これは、以前の回答とまったく同じではないものですが、一部の人にとっては役立ちます。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark-it
ソース

6

FlexBox CSSを使用する

Flexboxは、この種の問題に最適です。Flexboxは主にコンテンツを水平方向にレイアウトすることで知られていますが、実際には垂直レイアウトの問題でも同様に機能します。必要なのは、垂直セクションをフレックスコンテナーでラップし、拡張するセクションを選択することだけです。コンテナ内の利用可能なすべてのスペースが自動的に使用されます。

— ロブロス0606
ソース

6

オプションの1つはCSSテーブルを使用することです。優れたブラウザサポートがあり、Internet Explorer 8でも動作します。

JSFiddleの例

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

スニペットを展開

— ステッカー
ソース

6

これを試してください-テスト済み：

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

編集：2020更新：

vh今すぐ使用できます：

#right, #left {
  height: 100vh
}

— ルカシュクプス
ソース

5

あなたが使用することができますdisplay: flexし、height: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

スニペットを展開

— トゥク・グエン
ソース

すでにいくつかのflexboxソリューションが投稿されています。これには、この回答のわずか26日前に投稿されたこの正確な実装を含むものがあります。

— TylerH 2018年

5

2つのことを行う必要があります。1つは、既に行った高さを100％に設定することです。2番目は絶対位置に設定されます。これでうまくいくはずです。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

ソース

— プラバカールウンドゥルティ
ソース

3

古いソリューション。vh代わりに使用してください。

— avalanche1

1

vhモバイルデバイスでレスポンシブデザインを使用する予定がある場合は使用しないでください。

— Alexander Kim

5

次のCSSを試してください。

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— 問題児
ソース

5

実際、私にとって最も効果的なのは、vhプロパティを使用することでした。

私のReactアプリケーションでは、サイズを変更した場合でも、divをページの高さに一致させる必要がありました。、を試してみましたがheight: 100%;、overflow-y: auto;設定height:(your percent)vh;どおりに機能する場合、どれも機能しませんでした。

注：パディング、丸い角などを使用している場合は、それらの値をvhプロパティのパーセントから差し引いてください。そうしないと、高さが増えてスクロールバーが表示されます。これが私のサンプルです：

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

— ジミーフラッシュ
ソース

ちなみに、要素の高さに影響を与える「角の丸み」について触れていますが、設定でbox-sizing: border-box;これを克服できると思います。つまり、要素のサイズ（幅と高さ）を計算するときに境界線のサイズも考慮されるということです。

— Neek

5

一度お試しください...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

スニペットを展開

— スニル・ラージプート
ソース

3

position: absolute;とjQuery を使用する場合は、

$("#mydiv").css("height", $(document).height() + "px");

— ジョン・スミス
ソース

1

JavaScriptは必要ありません。最新のソリューションは、CSSフレックスボックスモデルを使用することです。

— Dan Dascalescu 2014年

JSを使用している場合、これは非常に便利です。注：F（5）またはCTRL + F5を使用すると異なる結果が返されるため、これを$（window）.load（）で使用するのが最善です。詳細については、このリンクを確認してください。stackoverflow.com/questions/13314058/…–

— エドワード

2

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

— ラムニワスシャルマ
ソース

1

スペルミスの可能性：（widht終わり近く）

— Peter Mortensen

ブラウザウィンドウのdivの高さを100％にする方法

ビューポートのパーセンテージ（またはビューポートの相対）の長さ

ビューポートのパーセンテージの長さとは何ですか？

これを使用して、ブラウザの高さを仕切りで埋めることができますか？

HTML

CSS

これらの新しいユニットをサポートしているブラウザは何ですか？

これを複数の列でどのように使用できますか？

とはどう100vh違うの100%ですか？

HTML

CSS

とはどう`100vh`違うの`100%`ですか？