问如何将浮动的子div的高度扩展到父div的高度？

EN

对于parent元素，添加以下属性：

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

那么对于.child-right来说：

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

使用CSS示例here和有关等高列here的更多信息，可以找到更详细的结果。

这个问题的一个常见解决方案是使用绝对定位或裁剪浮点数，但这些方法比较棘手，因为如果您的列在number+size中发生更改，则需要对它们进行大量调整，并且您需要确保“主列”始终是最长的。相反，我建议您使用三个更健壮的解决方案之一：

1. display: flex：是迄今为止最简单最好的解决方案，而且非常灵活--但不受、IE9和display: table的支持:非常简单，非常兼容(几乎所有浏览器都有)，非常flexible.
2. display: inline-block; width:50%，但有一个负边框:非常简单，但列底边框有点棘手。

1. display:flex

这真的很简单，很容易适应更复杂或更详细的布局-但flexbox只支持IE10或更高版本(除了其他现代浏览器)。

示例： http://output.jsbin.com/hetunujuma/1

相关网址：

<div class="parent"><div>column 1</div><div>column 2</div></div>

相关css:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox支持更多的选项，但只要有任意数量的列就足够了！

2.<table>或display: table

要做到这一点，一个简单且非常兼容的方法是使用table -，如果你需要旧的IE支持，我建议你先试试。您正在处理列；div+float不是最好的方法(更不用说仅仅为了克服css限制而使用多层嵌套div的事实了)，这比仅仅使用一个简单的表更不“语义”。如果您不希望使用css元素，可以考虑使用css display: table ( IE7和更早的版本不支持)。

示例： http://jsfiddle.net/emn13/7FFp3/

与相关的html: (但请考虑使用普通的<table> )

<div class="parent"><div>column 1</div><div>column 2</div></div>

相关css:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

这种方法比使用浮点数的overflow:hidden要健壮得多。您可以添加几乎任何数量的列；如果需要，您可以让它们自动缩放；并且您可以保持与旧浏览器的兼容性。与float解决方案所需的不同，您也不需要事先知道哪一列是最长的；高度缩放也很好。

KISS:除非你特别需要，否则不要使用浮动黑客。如果IE7是一个问题，我仍然会选择一个包含语义列的普通表，而不是一种难以维护、灵活性较差的技巧-CSS解决方案。

顺便说一句，如果你需要你的布局是响应式的(例如，在小型手机上没有列)，你可以使用@media查询来回退到小屏幕宽度的普通块布局-无论你使用<table>还是任何其他display: table元素，这都是有效的。

3.利润率为负的display:inline block。

另一种选择是使用display:inline block。

示例： http://jsbin.com/ovuqes/2/edit

与相关的html: ( div标记之间没有空格非常重要！)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

相关css:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

这有点棘手，负边距意味着列的“真实”底部是模糊的。这反过来意味着您不能相对于这些列的底部定位任何内容，因为这是由overflow: hidden切断的。请注意，除了内联块之外，您还可以使用浮点数实现类似的效果。

TL;DR：如果可以忽略IE9和更老的版本，请使用flexbox；否则，请尝试使用(css)表。如果这两个选项对您都不起作用，那么就有一些负边距问题，但这些问题可能会导致奇怪的显示问题，在开发过程中很容易遗漏这些问题，并且需要注意一些布局限制。

对于父级：

display: flex;

对于孩子们：

align-items: stretch;

你应该添加一些前缀，检查caniuse。