html - 如何在 float 的相邻 div 上获得 100% 的高度？

Question

​<div id='container'>
    <div class='left'></div>
    <div class='right'></div>
    <div class='clear'></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

鉴于上面的简单标记，可以在操作中看到 here at jsFiddle ，你怎么得到 float 的right div 占用其没有明确高度的父容器的剩余高度？父容器的最终高度由 float 的 left 决定。分区

通常，我通过 Javascript 解决这个问题，并在页面加载后修复高度。但是，必须有一种替代的、标准的和最佳的方法来处理这个问题。

我认为这只是以这种方式构建布局的固有问题，那么除了使用 <table> 之外还有什么替代方案？ ？

Answer 1

如果没有使用 float 在父项上明确显示高度，则无法完成。

不过，您可以使用 display: table-; 和 table-cell 来模拟表格的行为，而无需实际使用它们:

#container { 
    width: 200px;
    background-color: green;
    display: table;
}
.left {
    display: table-cell;
    width: 30px;
    height: 200px;
    background-color: red;
}
.right {
    display: table-cell;
    height: 100%;
    width: 30px;
    background-color: blue;
}

这样您就不需要清除元素，只要声明了，两个 div 将始终占据 100% 的高度。

http://jsfiddle.net/6XagR/4/