Div 内部两个浮动 div 后的高度 100%

Question

我想在一个div中水平排列两个div。两个div的高度是灵活的，因为里面有一个table。 table 可以过滤，因此有时必须更改高度。我希望外部 div 可以动态跟随内部的两个 div。我将外部 div 的高度设置为 100% 以跟随两个内部 div 的高度，但它不起作用，因为两个内部 div 具有 float:left 样式。

Answer 1

我想你是在要求清理浮动，

这是流行的 clearfix class。添加此 CSS

.clearfix:before,.clearfix:after 
{
  content: "";
  display: table;
}

.clearfix:after 
{
  clear: both;
}

.clearfix 
 {
  zoom: 1; /* ie 6/7 */
 }

并给你的 parent div class

class="clearfix"

我读过 here.

Answer 2

body{
margin: 0;
}
div{
box-sizing: border-box;
border: 1px solid red;
}
.outer{
width: 80%;
margin: 0 auto;
height: 100vh;
}
.inner{
float: left;
width: 50%;
}

<div class="outer">
<div class="inner">inner 1
<p>Lorem Ipsum is simply dummy text of the printing and t</p>
</div>
<div class="inner">inner 2
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1</p>
</div>
</div>

Answer 3

对于您的情况，我认为您需要 parent div 包含两个动态大小 children。您可以设置 parent 的属性 overflow 来实现该效果。

.parent{
 overflow:hidden;
}

Div 内部两个浮动 div 后的高度 100%

Div height 100% following two float divs inside

html

css

division