overflow: hidden
將無法正常工作,因爲您沒有將郵件放在容器內。相反,您將它們與絕對定位進行堆疊並將底部邊距計算爲其兄弟。使用您當前的標記,除非您還想手動計算,否則無法切斷頂部的消息。另外,你的問題並不十分清楚:你是否希望一旦它位於容器之外就停止添加消息,或者你只是想將它們從屏幕上裁剪掉(但它們仍然可以在DOM中看到)。
無論哪種方式,當前的結構可以多改善,如果你創建了以下方法:
<div id=chat>
<input type=text id=chat-message>
<div class=message>First message</div>
<div class=message>Second message</div>
<div class=message>Third message</div>
</div>
這樣,所有你需要做的,使它們看起來像你想它使用Flexbox的:
#chat {
display: flex;
flex-direction: column-reverse; /* from bottom to top */
}
你的JavaScript也將更加簡單,因爲你只可以創建一個新的元素的#chat
最後一個孩子,這意味着沒有額外的計算。 (在屏幕上出現一定數量的消息後,仍然可以刪除最舊的消息)。
簡單的答案是,你不應該增加利潤率底部產生期望的效果。如果可以的話,可以考慮使用flexbox來代替(儘管它不適用於舊版瀏覽器)。此外,JavaScript不使用靜態類型,因此Number(Key)和key.toString()不是必需的。 –
將高度設置爲100%應該可以解決問題。 c.style.height =「100%」; –