2016-05-23 14 views
0

親の.container(ピンク)divは、子divの内容に従って垂直に拡張されません.red .red divは.content divから垂直方向に流れ出します。親divの子div divin

コンテンツディビジョンの高さを「100%」から「auto」に設定して修正しようとしましたが、そうすると.topと.container divが完全に消えます。何故ですか?? "オーバーフロー"

を含めずに最善の解決策は、スクリーンショットを参照してくださいいただきました:あなたはにclearfixクラスを追加することができます

Screenshot

CSS

html, body { 
width: 100%; 
left: 0px; 
top: 0px; 
margin: 0px; 
height: 100%; 

} 



.container { 
width: auto; 
float: none; 
width: auto; 
max-width: auto; 
position: relative; 
background-color: rgba(216,86,112,0.5); 
height: 100%; 
margin-top: auto; 
margin-right: 5%; 
margin-left: 5%; 
display: block; 
} 




.top { 
width: 100%; 
background-color: rgba(204,51,0,1); 
height: 10%; 
position: relative; 
margin: 0px; 
text-align: center; 
} 

.left { 
float: left; 
height: auto; 
width: 32.33%; 
background-color: rgba(255,0,0,1); 
margin-right: auto; 
position: relative; 
margin-left: auto; 
} 

.center { 
float: left; 
height: auto; 
width: 32.33%; 
background-color: rgba(0,255,0,1); 
margin-left: 1.5%; 
margin-right: auto; 
position: relative; 
} 

.right { 
float: right; 
height: auto; 
width: 32.33%; 
background-color: rgba(0,0,255,1); 
margin-left: auto; 
margin-right: auto; 
position: relative; 
text-align: center; 
display: block; 
} 

HTML

<div class="container"> 

<div class="top"> 
</div> 

<div class="left"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
</div> 

<div class="center"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 
</div> 

<div class="right"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices. 

</div> 
</div> 

答えて

0

あなたのコンテナはheight:100%をここでcontainer

のCSSは、Demo

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
0

があなたの "右" のdiv後とコンテナのdivを閉じる前に、この "クリア" のdivを追加しています。これを削除する方法

<div style="clear: both ;" ></div> 
+0

が添加されている。何の違いもありませんでした。上記のコードを使ってjsfiddleで表示できますか? –

+0

ここで確認してください:https://jsfiddle.net/pisumathu/269zapyj/ – pisumathu

0

フロート:なし。あなたの.container

と私はuがまったくposition: relativeを必要といけないと思います。

+0

.containerに 'float:none'と' position:relative'が削除されました。差異を作らなかった –

+0

.containerだけでなく、.top .left .centerと.rightも削除して、 'position:relative'を削除してください。 –

関連する問題