2 柱容器 100% 车身高度答案

【问题标题】：2-Column Container 100% Body Height2 柱容器 100% 车身高度
【发布时间】：2013-10-02 04:52:24
【问题描述】：

我正在使用这个示例供参考：http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/（其中左列是通过 px 固定的宽度，而右列是可调整大小的）

我正在尝试使容器的高度为身体高度的 100%。

例如忘记该页面上的底部内容（复制代码），只是顶部布局示例，我如何将其高度（无论是否有内容）设为正文高度的 100%。对于内容，我试图让它滚动，没有（如果有的话）它需要是身体最小高度的 100%。

任何建议，到目前为止还没有运气..

我的jsfiddle 示例：

http://jsfiddle.net/GtK98/1/

【问题讨论】：

我正在尝试使两列的高度为 100%（以匹配正文），即使 div 中没有内容。
您还想要页脚吗？还是只是标题和内容？

标签： html css css-float two-columns

【解决方案1】：

你试过了吗

min-height:100%;

在 css 中？

【讨论】：

【解决方案2】：

这是一个没有页脚的布局，如果您想在此处添加页脚注释，我会这样做。

纯CSS，不固定头部高度，带/不固定左侧宽度，跨浏览器（IE8+）

看看那个Working Fiddle

HTML：（非常基础）

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftContent">
            </div>
            <div class="RightContent">
            </div>
        </div>
    </div>
</div>

CSS：

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Wrapper > div
{
    height: 100%;
    overflow: auto;
}

.LeftContent
{
    float: left;

    /*for demonstration only*/
    background-color: #90adc1;
}
.RightContent
{
    /*for demonstration only*/
    background-color: #77578a;
}

【讨论】：