css动态布局两个容器

Question

我有一个有趣的布局设计问题，我想知道我是否可以得到一些帮助。

彼此相邻有两个容器，大多数情况下，右边的容器是静态大小的。左边的那个应该基于动态加载的内容而增长。这可能有很多，或只是一个数据集。现在，正确的容器应该随着容器的增长而始终位于左侧容器旁边。

这是棘手的部分。左侧容器无法包裹，应占用屏幕上的剩余宽度，此时会出现滚动条。此时，右侧容器位于屏幕边缘旁边。

我可以让它工作，左侧容器将始终占用剩余的屏幕空间，但即使左侧只有一点点数据，这也会将右侧容器一直向右推。

我也可以让数据增长并让右侧留在左边，但是溢出的滚动条永远不会出现。我对如何解决所有这些要求感到满意。

我也可以设置所有内容的宽度，但这并不能真正解决成长到屏幕分辨率的要求，并且仍然无法解决少量数据

编辑：附上我当前布局的图像。这看起来不错，因为它是“满”的，占用浏览器宽度的100％。我需要的是，如果数据列变得太小而不再滚动，则右侧部分向左移动。

Answer 1

我把我认为你想要完成的事情放在一起。

1. 右侧立柱的宽度和位置固定。
2. 左列将在宽度上展开，如果宽度太小而无法显示内部内容，则滚动。

以下是示例： http://jsfiddle.net/MwdED/

这是HTML：

<div class="container">
    <div class="col-left">
        <div class="col-content">
            <div class="wide-content">
                THis is some wide content, sitting inside of the left column.
            </div>
        </div>
    </div>
    <div class="col-right">
        <div class="col-content">
            This is the right column.  It's fixed in width.
        </div>
    </div>
</div>

和CSS

.container {
    position: relative;
    min-width: 500px; /*make sure the columns don't collapse on top of each other*/
}

.col-left {
    padding-right: 200px; /*make room for right column*/
}

.col-left .col-content {
    min-width: 300px; /* the minimum width, before overflow scrolling occurs */   
    overflow: auto;
}

.col-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}

.wide-content {
    background: red;
    width: 1000px;
}

Answer 2

考虑到Axel提供的内容，我确信这样的事情会起作用。目的是使两个容器都是流动的，这样无论哪个容器长大或缩小，另一个容器会占用差异，但由于某种原因，容器会相互渗透。

.col-left .col-content {
    min-width: 20%; /* the minimum width, before overflow scrolling occurs */ 
    max-width: 80%;
    overflow: scroll;
}

.col-right {
   position: absolute;
   right: 0;
   top: 0;
   min-width: 20%;
   max-width: 80%;
}