我正在嘗試創建一個 UL，它將動態添加 LI 專案。
目標是串列為空時高度為零，然后隨著專案添加到串列中擴展到特定高度，并設定最大高度，以便如果串列增長超過特定高度，則所有舊專案被溢位隱藏：隱藏。
因此，串列底部的最新專案應始終可見，而較舊的專案則向上顛簸并最終不可見。
我可以通過將 UL 包裝在容器 DIV 中，為 div 設定固定高度，然后將 UL 設定為 position: absolute 并將容器 div 設定為 position:relative來獲得大部分方法。
但是如果我為容器 div 設定了一個固定的高度，那么當串列沒有專案時，它在串列上方和下方的界面專案之間仍然有一個很大的空白。
為了看起來不奇怪，我需要串列（及其容器 div）隨著串列的增長動態調整高度的大小，然后以最大高度設定限制增長。
但是，如果我洗掉容器 div 的固定高度，它會將那個 div 的高度設定為零像素，因為 UL 設定為位置：絕對，因此串列根本不顯示（因為整個串列被視為在零高度 div 內溢位）。
對于人們來說，這似乎是一件相當普遍的事情，但我似乎找不到任何不涉及設定固定高度的解決方案。
代碼示例...
HTML：
<div id="above_list">This should be touching the below_list div when the list is empty</div>
<div id="list_container">
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
<li>Item 5
</ul>
</div>
<div id="below_list">This should be touching the above_list div when the list is empty, and should get farther away from the above_list div as <li> items are added to the list
CSS：
#list_container {
position: relative;
max-height: 100px;
overflow: hidden;
}
ul {
position: absolute;
bottom: 0;
}
In the above code example the container div displays with zero height even if the list has a bunch of list items.
I'll need the container div to display with zero height only when the list has no items. Then the container div should grow in height as items are added to the list, and should stop growing if the list gets above a certain height.
The list needs to be positioned at the bottom of the container div, so that if the list starts to overflow beyond the container div's max-height then instead of hiding the newer list items below the bottom of the div, it should push the older list items up above the top of the div. (So the top of the UL is treated as overflow, instead of the bottom of the UL being treated as overflow.)
uj5u.com熱心網友回復：
使用 flex 列并將內容對齊到 flex 端。
除非出于其他原因需要，否則根本不需要包裝 div。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
max-height: 150px;
overflow: hidden;
border: 1px solid grey;
list-style: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
}<div id="above_list">This should be touching the below_list div when the list is empty</div>
<div id="list_container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div id="below_list">This should be touching the above_list div when the list is empty, and should get farther away from the above_list div as items are added to the list
</div>沒有串列項的示例：https : //codepen.io/Paulie-D/pen/vYJgPEY
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/335404.html
上一篇：Tcl拆分串列中的串列元素
下一篇：如何將資料幀傳輸到二維串列