如何使用CSS进行此类布局？

Question

这是一种在边缘处具有固定长度的布局，但主要内容容器是流动的。

我在这里做了一个jsfiddle http://jsfiddle.net/JyXtR/3/ 我无法得到它，我不明白为什么。

我想要的是这个 http://i.imgur.com/VPzWE.png

主要内容和右侧容器上的内容应该是相同的高度，无论其中包含多少内容。

我真的很擅长这个或者CSS不适合这些类型的布局，它们总是会占用整个页面吗？

Answer 1

Demo。使用display:inline-block;，并调整两个对象的宽度。为了演示目的，我手动将主div的高度设置为300px。请注意，您的内部对象必须使用较少的than height:100%，因为main不会滚动。

也许可以将height属性设置为display:table-cell元素，但给定的解决方案应该适用于您的情况。

更新：http://jsfiddle.net/22D4F/4/

Answer 2

立即检查。但是有一个问题，因为它只能用css解决。 如果侧边栏比内容长，问题是布局无法正常工作。没有javascript就无法解决，所以你必须将内容div的最小高度设置为侧边栏内容高度。 http://jsfiddle.net/DvaWk/

Answer 3

你需要'浮动：左'你的聊天div并将在线用户div设置为200px;
编辑：还添加overflow：auto到#main。