用於網絡聊天不工作的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