html - 子 div 离开父 div

Question

父.container(粉红色)div没有按照子div.red的内容垂直展开，因此.red div垂直向下流出.content div!

我尝试通过将内容 div 的高度从“100%”设置为“自动”来纠正此问题，但是当我这样做时，.top 和 .container div 都完全消失了。这是为什么？？什么是不包括“溢出”的最佳解决方案

请看截图:

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

您可以向您的容器添加一个 clearfix 类，并删除 container 的 css 中的 height:100%

这是 Demo

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