html - 2 柱容器 100% 车身高度

Question

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

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

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

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

我的jsfiddle例子：

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

Answer 1

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

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

看看那个工作小提琴

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;
}

Answer 2

你有没有尝试过

min-height:100%;

在CSS中？