网络聊天的 CSS 布局不起作用

Posted 2023-03-06

【中文标题】网络聊天的 CSS 布局不起作用

【英文标题】：CSS Layout for web chat not working

【发布时间】：2011-10-14 23:53:54

【问题描述】：

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

我是 Web 开发的新手，所以如果我以可以想象的最糟糕的方式做所有事情，我深表歉意。

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

侧边栏应该在右边，不确定我做错了什么，因为我正在关注我在顶部链接到的 *** 问题。

如果文本太长，文本会自动换行，这很好！但是所取的高度并没有增加，这使得它与下一行重叠。

当内容太长时，也没有垂直滚动条（不像我链接的***答案）..

谢谢！

【参考方案1】：

只有在设置了高度或最大高度时才会出现滚动条。如果不是这种情况，它们只会扩展。 添加类似height: 300px; 的内容

至于聊天文本的换行。此文本是绝对定位的，因此它被从文档流中取出，并且不能将其他元素压低。您可能要考虑在.chatText 上使用margin-left 而不是position:absolute 和left。

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

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

【讨论】：

谢谢！我试过margin-left，但这取决于名称的宽度。我尝试将名称的宽度设置为 80px，但这没有什么区别。我该怎么做？

然后您可以将 .personWhoSaidIt 设置为 position:absolute;看这里：jsfiddle.net/3YrZT

【参考方案2】：

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