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

【问题标题】：Div height 100% following two float divs inside内部两个浮动 div 后的 100% div 高度
【发布时间】：2015-09-06 23:14:47
【问题描述】：

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

【问题讨论】：

box-sizing: border-box; 和 height: 100%;。如果您需要更好的帮助，请发布一些代码。
很抱歉，您能澄清一下吗？你的问题根本没有多大意义。检查您的问题是否有拼写错误，并向我们展示您已有的代码。

标签： html css division

【解决方案1】：

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

.parent{
 overflow:hidden;
}

【讨论】：

【解决方案2】：

我认为您要求清除浮动，

这里是流行的 clearfix 类。添加这个 CSS

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

.clearfix:after 
{
  clear: both;
}

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

并给你的父 div 类

class="clearfix"

我已经读过它 here.

【讨论】：

他/她这样说：I want to arrange two divs horizontally inside a div - 所以我认为他/她不是这个意思。
他成功地做到了。但是父 div 的高度并没有随着孩子的高度而动态变化。

【解决方案3】：

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>

【讨论】：