親divの子div divin

Question

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

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

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

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> 

Answer 1

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

のCSSは、Demo

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

Answer 2

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

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

Answer 3

：

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

上

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