web-dev-qa-db-ja.com

ブラウザウィンドウのdivを100％の高さにするにはどうすればいいですか？

私は2つの列 - 左divと右divを持つレイアウトを持っています。

右側のdivは灰色のbackground-colorを持っています、そして私はユーザーのブラウザウィンドウの高さに依存して垂直方向に拡大するためにそれが必要です。今のところbackground-colorはそのdivの最後のコンテンツで終わります。

私はheight:100%、min-height:100%;などを試しました。

htmlcsscss3height
1900
mike

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

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

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

上記のリンクされたW3候補勧告から：

ビューポートのパーセンテージの長さは最初の包含ブロックのサイズに比例します。最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大縮小されます。

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

これをどのように使用して、仕切りをブラウザの高さいっぱいにすることができますか？

この質問では、vhを使用できます。1vhはビューポートの高さの1％に等しいです。つまり、100vhは、要素がDOMツリーのどこにあるかにかかわらず、ブラウザウィンドウの高さと同じです。

HTML

<div></div>

CSS

div {
    height:100vh;
}

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

どのブラウザがこれらの新しいユニットをサポートしていますか？

これは現在Opera Miniを除くすべての最新の主要ブラウザでサポートされています。チェックアウト 使用できますか？ /さらなるサポートのため。

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

当面の質問の場合、左と右の仕切りを特徴とする、 JSFiddleの例 は、vhとvwの両方を含む2列のレイアウトを示しています。

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

例えば、このレイアウトを取ります。

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

ここでのpタグは100％の高さに設定されていますが、それを含むdivは200pxの高さであるため、200pxの100％は200pxとなり、not 100％はbodyの高さの100％になります。代わりに100vhを使用することは、pタグがbodyの高さに関係なく、divの100％の高さになることを意味します。この 付随するJSFiddle を見て、違いを簡単に見てください。

2583
James Donnelly

<div>または任意の要素の高さを設定したい場合は、<body>および<html>の高さも100％に設定する必要があります。それからあなたは100％で要素の高さを設定することができます:)

これが一例です。

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
542
Ariona Rian

要素を絶対に配置できる場合は、

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

それをするでしょう。

263
Tinister

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*/
}
132
Mr Geek

flexモデル ソリューションと比較すると、vhでトップ投票されたものを含め、他のすべてのソリューションは最適とは言えません。

CSSフレックスモデル の出現により、100％の高さの問題を解決するのはとても簡単になりました。親でheight: 100%; display: flexを、子要素でflex: 1を使います。彼らは自動的に自分のコンテナ内のすべての利用可能なスペースを占有します。

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

Flexモデルは すべての主要ブラウザでサポートされています および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>

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

94
Airen

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

つまり、身長を隠したい場合は、単に100vhを使用するだけです。

ここで私があなたのために描いた画像を見てください。

How to make a div 100% height of the browser window?

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

.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>
94
Alireza

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

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

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>

どのカラムを固定する必要があり、どのカラムが液体であるかによって、これには多くのバリエーションがあります。絶対位置指定でもこれを行うことができますが、私は一般的にフロートを使用して（特にクロスブラウザの観点から）より良い結果を見つけました。

53
cletus

これが高さの修正です。

あなたの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'});
    }
});
29
Jonas Sandstedt

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

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

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

28
Majda

100%は、幅と高さでは動作が異なります。

width: 100%を指定すると、「使用可能な幅の100％を親要素から取得するか、ウィンドウの幅を使用する」という意味になります。

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

私は常に100vhの最小の高さを持つように体を指定します、そしてそれは位置決めと計算を容易にします、

body {
  min-height: 100vh;
}
20
Dinesh Pandiyan

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

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

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

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

divの幅または高さをbrowser-window-sizeの100％に設定したい場合は、次のようにしてください。

幅の場合：100vw

高さの場合：100vh

またはもっと小さいサイズにしたい場合は、css calc functionを使用してください。例：

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

14
Руслан

これは私のために働いた：

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

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

このページ からとられた。

12
testing

<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
Santosh Khalse

htmlおよびbodyにheight:100%を設定してみてください

html, 
body {
    height: 100%;
}

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

11
Mohammed Javed

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

height:100vh;
7
khalifeh

FlexBox CSSを使う

Flexboxはこの種の問題に最適です。 Flexboxは横方向にコンテンツをレイアウトすることでよく知られていますが、実際には縦方向のレイアウトの問題に対しても同様に機能します。あなたがしなければならないのは、フレックスコンテナで垂直セクションをラップし、あなたが展開したいものを選ぶことです。彼らは自動的に自分のコンテナ内のすべての利用可能なスペースを占有します。

6
robross0606

選択肢の1つはCSSテーブルを使用することです。それは素晴らしいブラウザサポートを持っていても、IE8で動作します。

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
Stickers

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

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

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>
6
Michael_B

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>
5
Thuc Nguyen

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

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

出典

5
Prabhakar

試してみる - テスト済み：

body {
  min-height: 100%;
}

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

実際、私にとって最も効果的なのは、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);
}
4
JimmyFlash

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

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
3
ProblemChild
 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>
2
RamNiwas Sharma

position: absolute;とjQueryを使うのなら、

$("#mydiv").css("height", $(document).height() + "px");
1
John Smith Optional

ブラウザウィンドウの高さのdivを100％にするには、次のCSSを使用します。

display: block;
position: relative;
bottom: 0;
height: 100%;
0
mohammad nazari

最も簡単：

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>
0
Tony Smith

これはあなたが上で持っていたものと正確には同じではないが、ある人にとっては役に立つかもしれないものです。

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/

0
brand-it

これはあなたのブラウザに応じて自動的にコンテンツの高さを変更します。私はこれがあなたのために働くことを願っています。下記の例を試してみてください。

あなたはheight:100%だけを設定する必要があります。

  html,body {
  height:100%;
  margin:0;
}
.content {
  height:100%;
  min-height:100%;
  position:relative;
}
.content-left {
  height:auto;
  min-height:100%;
  float:left;
  background:#ddd;
  width:50%;
  position:relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll     #aaa;
  width:50%;
  position:relative;
  float:left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width:50%;
  float:left;
  position:relative;
  overflow-y:scroll;  
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>
0
Rudra

このソリューションはjQueryを使用して行われますが、画面サイズに合わせて列を作成する人にとっては便利かもしれません。

ページの先頭から始まる列の場合、このソリューションは最も簡単です。

body,html{
  height:100%;
}

div#right{
  height:100%
}

notである列の場合は、ページの上部から始まります（たとえば、ヘッダーの下から始まる場合）。

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

最初の方法では、ボディの高さもカラムにも適用されます。つまり、starting_pixels + height100%です。

2番目の方法は、本文の高さを取得することでユーザーに表示されるページの高さを取得し、ヘッダーサイズを減算して、列を表示するために残っている高さを確認します。

0
zurfyx