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

Question

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

鉴于上面的简单标记，可以在 jsFiddle的操作中看到，如何让浮动rightdiv 占据其父容器的剩余高度，而该父容器没有明确的高度？父容器的最终高度由浮动leftdiv 决定。

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

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

Answer 1

如果没有使用浮点数在父级上显式高度，则无法完成。

但是，您可以使用display: table-;and table-cellwhich 模仿表的行为，而无需实际使用它们：

#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/ ​</p>