CSS/HTML5：divタグの高さをブラウザウィンドウの現在の高さに合わせるにはどうすればよいですか？

Question

divタグの高さをブラウザのウィンドウの高さと正確に同じにします。したがって、ブラウザのサイズを変更すると自動的に調整されます。 それでは、CSSと同じ高さに設定する必要があります。

私は動作しません

.class { 
    height: 100%; 
} 

を試してみました。

em、rem、vh、whは明らかにフォントでしか動作しません。

ただし、ボディタグをある程度のピクセルにハードコードすると、その割合は子タグで機能しますが、これは動的ではありません。

私が欲しいもの：私のブラウザにこのスタックページを表示しているのと同じです。ブラウザのサイズを変更しても、同じサイズのページが表示され、新しいサイズに合わせてサイズ変更されるだけです（応答可能）。

ありがとうございました。あなたがhtmlの子であるDIV（任意のDIVは別の要素の子である、別の容器なしDIVがbodyの子である、のための高さ基準を設定する

html, body { 
    width: 100%; 
    margin: 0; 
} 

を追加する必要が

Answer 1

）

Answer 2

あなたのdivsの親はボディです。 height:100%は親と同程度に高くなります。だからあなたはこれをする必要があります。

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

Answer 3

vhをこのように追加します。

*{ 
    margin:0; 
    padding:0; 
} 
.container{ 
    background:grey; 
    height:100vh; 
} 

とHTML

<div class="container"> 
    <h1>Hello from the other side</h1> 
</div> 

、ここではexampleです。

Answer 4

簡単な方法でjqueryで行うことができます。

Answer 5

はい、VHの高さをdivに追加して、@ Nofelと完全に一致させることができます。

しかし、それはmozillaとchromeになります。 SafariやIEでは動作しません。

vhプロパティを追加すると、ウィンドウのサイズが変更されます。

Answer 6

ウィンドウのサイズ変更時にコンテナのサイズを変更する関数をバインドできます。

HTML：

<div class="container"> 
    Content 
</div> 

CSS：

.container { 
    height: 100vh; 
} 

はJavaScript：

function resize_container() { 
    var height = $(window).height(), 
     container = $('.container'); 

    container.css('height', height); 
} 

$(window).resize(resize_container); 

Answer 7

あなたが試すことができソリューション1

これを達成するためにheight :100vh。スニペットの下にチェック：

body{ 
 
    margin: 0; 
 
} 
 
.windowHeight{ 
 
    height: 100vh; 
 
    display: block; 
 
    background: #000; 
 
}

<div class="windowHeight"> 
 
    
 
</div>

ソリューション2

にjQueryでこれを行うための別の方法。下記のチェックスニペット：

$('.windowHeight').css('height', $(window).height());

body{ 
 
    margin:0; 
 
} 
 
.windowHeight{ 
 
    background:#000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="windowHeight"></div>