Question

我有一个带有浮动左侧导航窗格的容器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>

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延伸到浮动#leftnav div的整个高度，但包含的#content div不会伸展到高度的100％。我在其他地方读到这是因为父#container没有指定的高度（默认为auto），因此100％不是基于那个容器;但是，我无法指定高度，因为左侧导航窗格高度不是常量。

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

Answer 1

这类似于多年来一直困扰着人们的3柱液体"holy grail" CSS layout（尽管在过去的几年中已经解决了，但许多解决方案需要浏览器黑客或Javascript才能运行）。

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

Answer 2

简单的方法是使用JS将#content的高度设置为#leftnav的高度。您可以在#container上使用仿色列并制作绿色背景的切片/ GIF，然后在#container上与red一起垂直重复，但是你有它，但我不确定它是否符合您的需要。< / p>

Answer 3

试试这个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。

基于浮动兄弟</div>的100％高度<div>

3 个答案: