用于Web聊天的CSS布局无法正常工作

时间:2011-07-28 10:09:45

标签: html css layout

我正在尝试关注CSS How to set div height 100% minus nPx,但由于某种原因,它无效。

我是网络开发的新手,所以如果我以最可怕的方式做所有事情,我会道歉。

以下是页面:http://glados.cc/chat/layout.htm

侧边栏应该在右边,不知道我做错了什么,因为我正在按照我在顶部链接的stackoverflow问题。

如果篇幅太长,文字就会换行,这很好!但是所采取的高度不会增加,这使得它与下一行重叠。

当内容太长时,也没有垂直滚动条(与我链接的stackoverflow回答不同)..

谢谢!

2 个答案:

答案 0 :(得分:0)

滚动条只有在设置了高度或最大高度时才会出现。如果不是这样,他们只是扩展。 添加height: 300px;

之类的内容

关于聊天文本的包装。此文本位于绝对位置,因此它从文档流中取出,不能将其他元素推低。您可能要考虑在margin-left上使用position:absolute代替left.chatText

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

这是一个例子: http://jsfiddle.net/3YrZT/1/

答案 1 :(得分:0)

尝试position:absolute侧边栏和中间部分