CSS-如何在标题高度未知的情况下制作100%高度的两列布局

我需要完成这个主题，但我真的被卡住了。为了更好地描述，我展示了我需要得到的图片：

起初我试着用

div

s来实现它，但在Firefox中，由于

width

属性，它看起来完全不同。虽然我最关心的是IE8非标准模式（这是必需的），但我还是希望它在Firefox中看起来或多或少像样

然后我尝试使用两列表格，它在IE中运行良好，在Firefox中运行良好，但由于某种原因，如果右列内容比屏幕宽，表格无法容纳，并且我的内容被表格水平剪切，则不会显示滚动条

另外，查看了Stackoverflow上的早期文章，其中使用了

固定的
容器，但它似乎在IE8非标准模式下不起作用

我很高兴听到关于如何做到这一点的任何想法。
也许你可以这样做：

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

检查此项
这应该会有所帮助-一个非常基本的示例


记得在知道宽度时调整正确容器的宽度，因为6px边框（总计24px）超过了100%的可用宽度。
您能给我们提供一个lil位代码吗？Rito，这里是：。我用JS做了最初的100%高度，这不太好，由于某些原因，我现在无法复制内容裁剪。。。我甚至试着用JS改变内容宽度（为了模拟真实情况——用网格代替“测试范围”），但在这个小页面上仍然有效，而在一个大页面上却没有。在一个真实页面上，最里面的
#内容
变得足够宽，可以容纳内容（~6000px），但是
tr
（和
表
）被裁剪为屏幕宽度（~1000px）。请看图片：1）有两个6px的边框；2） 列应该是100%高或更高（可以增长）。我现在正在为你做这件事，但是，你的目标可以通过提供的任何一个例子来实现，对CSS的了解很少。比如如何（对不起，我不是CSS天才）？这是我主要关心的问题——让它100%高，两个柱子的高度相同，并允许整个东西生长。有两个不同大小的列是没有用的。请看图片：页眉的高度是未知的，当左侧的高度（内容）大于右侧时，页眉不起作用。