私の相対ディビジョンは、背景色またはイメージを表示しません

Question

私の相対div（.wrap）がCSSの定義された背景色またはイメージを表示しない理由を理解していません。ボディには、.wrapを持つ独自の背景があり、divとその内容の新しいものが作成されます。 （.localは私が持っているようにしようとしている絶対divです.wrapは多くのdivの1つで、バックグラウンドを作成します.wrapから単一の共有背景を持つ必要があります）

！

CSS

body{ 
min-height: 100%; 
min-width:100%; 
font-family: 'Open Sans', sans-serif; 
background-color: gray; 
} 

.wrap { 
position: relative; 
height: 100%; 
width: 70%; 
background-color: white; 
left: 15%; 
} 


.local { 
position: absolute; 
height: 40%; 
width: 20%; 
} 

HTML

<!-- MAIN BODY --> 
<div class="wrap"> 

<!-- LOCAL WEATHER --> 
<div class="local"> 
<p>THIS IS A TEST PARAGRAPH TO SHOW THE RELATIVE DIV ISSUE</p> 
<!-- <img src="images/weatherphoto.png"> --> 
</div> 
</div> 

Answer 1

.localを絶対的に配置すると、フローから外れます。流れの外には.wrapの内部に何もないので、高さ0に崩壊する。.wrapの高さは0であり、.localは流れていないので、bodyは内部に何も持たないので高さにも崩壊する0です。

パーセントを使用すると、要素のheightがその要素を含む割合に設定されます。すべてが崩壊した場合、その割合は何もありません。

bodyが画面全体の高さを占めるようにする場合は、calculated based on the viewport heightの値vhを使用することを検討してください。

私はあなたのbodyスタイルを更新信じ：

body{ 
    height: 100vh; 
    min-width:100%; 
    font-family: 'Open Sans', sans-serif; 
    background-color: gray; 
} 

それは順番に.localを与えるビューポートに相対的であるものとして、本体の高さを定義しているため、あなたが期待していた結果が得られます何かが％の割合である。

Answer 2

あなたの問題は、あなたのlocalクラスに加えて、あなたのwrapクラスが（実際には高さを占有していないということです。あなたはあなたの体のmin-height: 100%を指定します身体は固定された高さの親を持たないので、実際には何もしません;）

あなたが実際に探しているのは、本体の高さの100％を占めるように本体にheight: 100vhです。その例はhereです。

しかし、代わりにwrapクラスの高さを設定することをお勧めします。予想通り

.wrap { 
    position: relative; 
    height: 300px; 
    width: 70%; 
    background-color: white; 
    left: 15%; 
} 

これは、第2の背景色が表示されます:)

私はこのhereを展示フィドルを作成しました。

希望すると便利です。