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

Question

我需要完成主题，并且真的被卡住了。为了更好地描述，我放了一张我需要得到的图片：

起初我尝试用divs 来做，但由于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/

Answer 2

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

http://jsfiddle.net/pRAgY/

记得在知道宽度后调整右侧容器的宽度，因为 6px 边框（总共 24px）超过了 100% 的可用宽度。