html - 100% 高度 基于 float 兄弟

Question

我有一个容器 div，它有一个 float 的左侧导航 Pane 和一个右侧的内容 Pane :

<div id="header"></div>
<div id="container">
    <div id="leftnav"></div>
    <div id="content"></div>
    <div class="clearfix"></div>
</div>
<div id="footer"></div>

CSS:

body
{
    text-align: center; /* IE center div fix */
}

#container
{
    width: 800px; /* site width */
    background-color: red; /* so I can see it */
    text-align: left; /* undo text-align: center; */
    margin: 0 auto; /* standards-compliant centering */
}

#leftnav
{
    float: left;
    width: 200px;
}

#content
{
    height: 100%;
    width: 600px;
    margin-left: 200px;
    background-color: green; /* so I can see it */
}

.clearfix { clear: both; }

#container div 延伸至 float #leftnav div 的整个高度，但包含的#content div 未延伸至高度的100%。我在别处读到这是由于父 #container 没有指定高度(默认为自动)，因此 100% 不是基于该容器；但是，我无法指定高度，因为左侧导航 Pane 的高度不是恒定的。

当#container div 的高度由 float 的#leftnav 定义时，如何让#content div 成为#container div 高度的 100%？

Answer 1

这类似于 3 列液体 "holy grail" CSS layout多年来一直困扰着人们(尽管在过去几年中已得到解决，尽管许多解决方案需要浏览器 hack 或 Javascript 才能运行)。

我强烈建议您不要在这里重新发明轮子，因为很难让 CSS 完全按照您描述的方式执行。这是此布局和许多其他类似液体布局的好资源: http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm