我正在嘗試使用javascript，css和html製作一個非常簡單的聊天框的前端。如何使用CSS隱藏元素溢出？

當用戶調整窗口大小時，如果聊天信息大於12條消息，則消息會從容器溢出，這會導致元素溢出問題。

我做了一個這樣的jsfiddle你們可以自己嘗試：https://jsfiddle.net/fb72uwwq/6/

在小提琴，點擊聊天按鈕，垃圾郵件，調整您的瀏覽器，你可以看到他們溢出。

我嘗試了一些堆棧溢出的答案，但overflow: hidden;沒有工作。我該如何解決這個問題？

2017-08-12 quad

簡單的答案是，你不應該增加利潤率底部產生期望的效果。如果可以的話，可以考慮使用flexbox來代替（儘管它不適用於舊版瀏覽器）。此外，JavaScript不使用靜態類型，因此Number（Key）和key.toString（）不是必需的。 –

將高度設置爲100％應該可以解決問題。 c.style.height =「100％」; –

CSS

#chat{ 
    height: 100% !important; 
    overflow-y: hidden; 
    /* if you want to scroll on overflow, you can use overflow-y: scroll; or overflow-y: auto; */ 
}

來源

2017-08-13 00:36:27

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最後一個孩子，這意味着沒有額外的計算。（在屏幕上出現一定數量的消息後，仍然可以刪除最舊的消息）。

來源

2017-08-13 00:14:25

將高度設置爲100％可以解決問題。

c.style.height = "100%";

來源

2017-08-13 00:24:03

如何使用CSS隱藏元素溢出？

回答

CSS

相關問題