html - 两个容器的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;
}