CSS - 如何使用未知高度的标题制作 100% 高度的 2 列布局

Question

我需要实现主题，但真的卡住了。为了更好地描述，我贴了一张我需要得到的图片:

起初我尝试用 div 来做，但是由于 width 属性，它在 Firefox 中看起来完全不同。虽然我主要关心的是 IE8 非标准模式(这是要求)，但我希望它在 Firefox 中看起来或多或少看起来不错。

然后我尝试用两列表来做，它在 IE 中运行良好，在 Firefox 中运行良好，但出于某种原因，如果右列内容变得比屏幕宽，表格将无法容纳并且我的内容会被裁剪水平放置在表格旁边，不显示滚动条。

此外，查看了 Stackoverflow 上的早期帖子，使用 fixed 容器，但它似乎不适用于 IE8 非标准模式。

很高兴听到关于如何做到这一点的任何想法。

Answer 1

也许你可以这样做:

.left{
    float:left;
    position:absolute;
    width:200px;
    background:red;
    border:2px solid #000;
    top:200px;
    bottom:0;
    left:0;

}
.right{
    overflow:hidden;
    background:green;
    position:absolute;
    top:200px;
    bottom:0;
    left:204px;
    right:0;
    border:10px solid #000;
}

html, body{
    min-height:100%;
    height:100%;
}
.header{
    width:100%;
    height:200px;
    background:yellow;
}

检查这个http://jsfiddle.net/QHTeS/