私の背景色の表示を得ることができません

body{ 
    margin:0px; 
    padding:0px; 
    min-height:100%; 
    background-color: #FFCC00; 
} 

.container{ 
    width:100%; 
    height:100%; 
    background-color:red; 
} 

.nav_wrapper{ 
    width:18%; 
    height:100%; 
    background-color:cornflowerblue; 
} 

.resposive-page{ 
    width:82%; 
    height:100%; 
    background-color:deeppink; 
}

私のコンテナはボディと同じ100％の高さと幅になりますか？ nav_wrapperで18％、pxを使わずにreposive-pageで82％？なぜ私の背景色は表示されません。私の背景色の表示を得ることができません

Demo

出典

2016-06-17 darkness

html、bodyとcontainer！00パーセントセットの高さを持っている必要があります。

その後、彼らは空になっているので、あなたのdivが表示されない内部の要素

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    margin:0px; 
 
    padding:0px; 
 
    height: 100%; 
 
    min-height:100%; 
 
    background-color: #FFCC00; 
 
} 
 

 
.nav_wrapper{ 
 
    width:18%; 
 
    height:100%; 
 
    float: left; 
 
    background-color:cornflowerblue; 
 
} 
 

 
.resposive-page{ 
 
    width:82%; 
 
    height:100%; 
 
    float: left; 
 
    background-color:deeppink; 
 
}

<div class="container"> 
 
<div class="nav_wrapper"></div> 
 
<div class="resposive-page"></div> 
 
</div>

出典

2016-06-17 16:27:04

ありがとう〜ありがとう – darkness

フロート。その中に空白以外の文字を配置し、レンダリングします。そのような：.nav-wrapperと.resposive-page代わりにheight: 100%;あなたのための

<div>&nbsp;</div>

出典

2016-06-17 16:29:22

使用height: 100vh;。次に.nav-wrapperと.resposive-pageにfloat: left;を追加します。

は

body{ 
 
    margin:0px; 
 
    padding:0px; 
 
    min-height:100%; 
 
    background-color: #FFCC00; 
 
} 
 

 
.nav_wrapper{ 
 
    width:18%; 
 
    height:100vh; 
 
    background-color:cornflowerblue; 
 
    float: left; 
 
} 
 

 
.resposive-page{ 
 
    width:82%; 
 
    height:100vh; 
 
    background-color:deeppink; 
 
    float: left; 
 
}

<body> 
 
<div class="container"> 
 
<div class="nav_wrapper"></div> 
 
<div class="resposive-page"></div> 
 
</div> 
 
</body>

出典

2016-06-17 16:29:31

これはあなたが言及しているものですか？ https://jsfiddle.net/cb8ctkfo/3/

widthプロパティとは異なり、それは、その内容に基づいているためheight属性がパーセンテージとしてよく使用されていません。 width属性でパーセンテージを使用すると、そのコンテンツとは無関係です（要素と仮定します）。

しかし、これは正しい方向への一歩をもたらします。

出典

2016-06-17 16:35:11 OysterMaker

私の背景色の表示を得ることができません

答えて

関連する問題