Question

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

鉴于上面的简单标记，可以在动作here at jsFiddle中看到，如何让浮动的right div占用其父容器的剩余高度，而不是明确的高度？父容器的最终高度由浮动的left div确定。

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

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

Answer 1

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

但是，您可以使用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/

如何在漂浮的相邻div上获得100％的高度？

1 个答案: