用于网络聊天不工作的CSS布局

Question

我正在尝试关注CSS How to set div height 100% minus nPx，但由于某种原因，它不起作用。

我是网络开发新手，所以我很抱歉如果我以最恐怖的方式做所有事情。

这里是页：http://glados.cc/chat/layout.htm

的侧边栏应该是在正确的，不知道我在做什么错了，因为我正在关注的问题计算器我挂在顶部。

如果文字太长，文字会打包，这很好！但是所采用的高度并不增加，这使得它与下一条线重叠。

还没有垂直滚动条（不像计算器答案我联系）当内容变得太长..

谢谢！

Answer 1

只有在设置了高度或最大高度时才会显示滚动条。如果不是这样，他们只是扩大。 添加类似height: 300px;

至于聊天文本的包装。该文本是绝对定位的，所以它被从文档流中取出，不能将其他元素压低。你可能想考虑使用margin-left而不是position:absolute和left在.chatText。

而且，正如DrStrangeLove指出的那样，您的侧边栏缺少绝对定位。

下面是一个例子： http://jsfiddle.net/3YrZT/1/

Answer 2

尝试position:absolute的侧边栏和middlePart