cssでどのように測位が機能しますか？

Question

https://jsfiddle.net/z3fhtbq9/

私は、上記のフィドルが、体の上から下に赤色の背景色を表示することを期待しています。しかし、そうではありません。なぜですか？

<div style="background-color:red;position:relative;top:0px;bottom:0px;"> 

Answer 1

divのサイズ（高さ幅）を追加します。..それは

<div style="height: 100vh;background-color:red;position:relative;top:0px;bottom:0px;"> 
</div> 

div要素は、高さ0と幅0を持っていた動作します（幅は常に同じであった）理由は何thatsのありません変化が観察された。あなたが何らかのテキストのようにdivの中に何かを追加したか、単に高さの幅を与えた場合、それはうまくいっていた可能性があります。

ここで100vhは、デバイスが持つビューポートの高さが常に100％になることを意味します。

絶対配置の要素は他の要素の影響を受けません 他の要素には影響しません。基本的には他の要素によって影響されません だから、100％のvhはそれで動かない。それは、フルサイズの比較的位置付けられたdivに入れた場合、 を動作させます。絶対に 配置要素は、最も近い配置先の 祖先（非静的）に相対的に配置されます。

Answer 2

私は配置とは関係ありませんが、このdivでボディを塗りつぶすには、要素の幅と高さを設定する必要があります。あなたは、CSSに設定することができます。

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

、あなたはこのように、幅と高さが100％を追加するには、divのスタイルに：

<div style="width:100%; height:100%; background-color:red;position:relative;top:0px;bottom:0px;"></div> 

それとも、単に身体のdivの上に赤い背景のスタイルを置くことができます。