2柱容器100％主体高度

Question

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

我正在努力使容器的高度达到身高的100％。

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

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

我的jsfiddle示例：

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

Answer 1

你试过吗

min-height:100%;

在css？

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