我正在 Angular 中創(chuàng)建一個(gè)聊天應(yīng)用程序，并嘗試為其設(shè)置 UI。我需要?jiǎng)?chuàng)建一個(gè) div 來(lái)容納聊天消息，隨著更多消息填充 div，我不希望 div 展開(kāi)，而只是保持相同的大小并顯示滾動(dòng)條。該 div 的大小應(yīng)為父 div 的 100%。當(dāng)您單擊按鈕添加數(shù)據(jù)時(shí)，div 會(huì)增大。即使我以 px 或百分比格式設(shè)置高度，div 仍然會(huì)增長(zhǎng)。
1 回答
SMILET
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
您鏈接的頁(yè)面不會(huì)加載，但以下是制作可滾動(dòng)元素的基礎(chǔ)知識(shí)：
HTML / JS 結(jié)構(gòu)
制作一個(gè)外容器
div制作一個(gè)內(nèi)部容器
div（這將是“滾動(dòng)包裝”）將內(nèi)部容器附加到外部容器
將您需要的任何東西插入內(nèi)部容器（您可以使用類似的東西
insertAdjacentHtml或適合您的具體情況的任何東西）
這種步驟順序尤其適用于內(nèi)容動(dòng)態(tài)變化的場(chǎng)景。
CSS
對(duì)于外容器
設(shè)置一個(gè)固定值
width并設(shè)置height: autoborder-radius如果您想要圓形邊緣，請(qǐng)?jiān)O(shè)置 a設(shè)置
overflow: hidden為防止?jié)L動(dòng)包裝紙的角彈出你可能會(huì)想要一些
padding內(nèi)容器用
您將希望
max-height和min-height小于外部容器的“固定”width+“任何padding”，等等。它可能有。放
position: relative設(shè)置
overflow-y: auto和overflow-x: hidden以便可以上下滾動(dòng)，但不能左右滾動(dòng)為了獲得所需的溢出行為，您需要設(shè)置和
width: 100%的固定值。（決定什么時(shí)候東西開(kāi)始溢出，即制作一個(gè)滾動(dòng)條）max-heightmin-heightmax-height
- 1 回答
- 0 關(guān)注
- 158 瀏覽
添加回答
舉報(bào)
0/150
提交
取消