css 2 列，动态内容。仅在右列滚动而不超过窗口宽度

Question

我精通 CSS，但一整天都没有找到解决方案。

我的目标是 IE9+，对 JavaScript/jQuery 解决方案不感兴趣。 (至少在我用尽所有可行的 CSS 选项之前不会)

我有一个复杂的 2 列网络应用程序布局。两列都有动态内容。左列需要展开以适应没有滚动条的内容。右栏可能包含需要访问的非常大的内容，因此右栏需要能够独立滚动。问题是我无法在右列上设置 100% 的宽度，因为它超过了窗口宽度。通常我会设置一个负的左边距来抵消它，但是因为我不知道左边的列有多宽我不能在这里这样做。我想也许某种类型的 hacky display: table-cell; 会起作用，(或者倒吸一口凉气，使用实际的表格)但是，唉，那样也没有成功。JSFiddle 示例。 http://jsfiddle.net/nARqR/似乎是一个常见的用例。

有什么建议吗？谢谢!

Answer 1

我能想到的唯一方法就是这样做(fiddle):

.left {
    background-color: #ccc;
    float: left;
    vertical-align: top;
}
.right {
    background-color: #666;   
    color: #ccc;
}

但是你会遇到右边 div 的填充问题，因为它的一部分隐藏在左边的 div 后面(因为它是 float 的)