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

【问题标题】：CSS - how to make 2-column layout of 100%-height with a header of unknown heightCSS - 如何使用未知高度的标题制作 100% 高度的 2 列布局
【发布时间】：2011-11-07 12:02:36
【问题描述】：

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

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

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

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

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

【问题讨论】：

你能提供一个 lil bit 代码吗？
里托，这里是：pastebin.com/FuhEJj13。我用 JS 做了最初的 100% 高度，这不好，由于某种原因，我现在无法重现内容裁剪......我什至尝试用 JS 改变内容宽度（模拟真实条件 - 有网格“测试范围”的位置），但仍然适用于这个小部分，而不适用于大页面。
真实页面上发生的情况是，最里面的#content td 变得足够宽以容纳内容（~6000px），但是 tr（和@987654329 @) 被裁剪为屏幕宽度（~1000px）。

标签： css layout liquid-layout

【解决方案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/

【讨论】：

请看图：页眉高度未知
当左侧的高度（内容）大于右侧时不起作用。

【解决方案2】：

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

http://jsfiddle.net/pRAgY/

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

【讨论】：

请看图：1）有两个的6px边框； 2) 列应该是 100% 高或更多（可以增长）。
我现在正在为您解决这个问题，但是，您的目标可以通过所提供的任何一个示例来实现，而且对 CSS 的了解很少。
怎么样（抱歉，我不是 CSS 天才）？这是我的主要关注点——让它 100% 高，两列高度相同，并允许整个事物增长。拥有两个不同大小的列是没有用的。