Html 100%高度<；部门>；基于浮动同胞

我有一个容器div，左侧有一个浮动导航窗格，右侧有一个内容窗格：

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

#container div延伸到浮动的#leftnav div的全高，但包含的#content div没有延伸到100%的高度。我在别处读到过，这是由于父容器没有指定的高度（默认为自动），因此100%不是基于该容器；但是，我无法指定高度，因为左侧导航窗格的高度不是恒定的

---

当#container div的高度由浮动的#leftnav定义时，如何将#content div设置为#container div高度的100%。

简单的方法是使用JS将

content

的高度设置为

leftnav

的高度。您可以在#容器上使用人造柱，将绿色背景切成一片/gif，并在#容器上垂直重复，同时使用红色，但是您有它，但我不确定它是否适合您的需要。

这类似于困扰人们多年的3柱液体（尽管在过去几年中已经解决了这个问题，但许多解决方案都需要浏览器黑客或Javascript才能发挥作用）

我强烈建议您不要在这里重新发明轮子，因为很难让CSS完全按照您所描述的那样执行。这里有一个很好的资源，用于此布局和许多其他类似的液体布局： 试试这个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;

    background-color: green; /* so I can see it */
    float:right;
}

.clearfix { clear: both; }

---

我还建议使用带有清晰的二者而不是div的换行符。

我已经完成了投票，但这或多或少是我想说的。我的布局与您提供的链接中的布局一样好；我愿意接受建议，但您链接的布局在回流和内容方面是不稳定的，不是100%的视口宽度，除了使用overflow:hidden，这会导致我在问题中忽略的另一个布局组件出现问题。此外，链接布局不会强制两列变为相同的高度，只是父容器变为最大元素的高度-我已经有了。我还没有测试回流行为vior是该模板的一部分，但它可以满足您的所有要求。也许您只是错误地修改了它。您可以将header/colmask的宽度调整为您想要的任何宽度，并且两列都延伸到包含元素的底部，无论哪一列更长。我从该网站下载了测试版本，并添加了背景：green'to.leftmenu.col1{}。这样做，您将看到我所指的行为（.col1是右侧的内容窗格，绿色背景不会延伸到页脚）。在Chrome 6.0.472.53和Firefox 3.6.8中进行了测试。未对下载的模板进行任何其他更改。对。如果将其添加到正确的样式，则外观良好：）更改以下样式背景颜色：“.leftmenu.colleft”、“.leftmenu”。这些是内容的容器样式。样式本身甚至会说“左菜单背景色”和“右菜单背景色”。我试图避免使用JavaScript解决方案。我知道以跨浏览器兼容的方式工作需要4秒钟，但这里理想的解决方案是纯CSS/XHTML。

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;

    background-color: green; /* so I can see it */
    float:right;
}

.clearfix { clear: both; }