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

Question

我需要实现主题，并且真的陷入困境。为了更好地描述，我已经描绘了我需要得到的东西：

起初我尝试使用div s进行此操作，但由于width属性，它在Firefox中看起来完全不同。虽然我主要关心的是IE8非标准模式（这是要求），但我希望它在Firefox中看起来或多或少看起来不错。

然后我尝试使用双列表，它在IE中运行良好，在Firefox中运行良好，但由于某些原因，如果正确的列内容比屏幕宽，表格不适应并且我的内容被裁剪在表格的水平方向上，没有显示滚动条。

另外，使用fixed容器查看Stackoverflow上的早期帖子，但它似乎不适用于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/

Answer 2

这应该有所帮助 - 一个非常基本的例子。

http://jsfiddle.net/pRAgY/

当您知道宽度时，请记住调整右侧容器的宽度，因为6px边框（总共24px）超过100％宽度可用。