無論父級的高度如何，都讓 div 粘在底部

Question

我正在嘗試創建一個購物車，其中列出了項目（綠色），底部應顯示一個“建議框”（粉紅色）。

意見箱（粉紅色）應始終位於底部； 當項目被添加到列表（綠色）時，它不應該覆蓋它們，而是移動到列表的底部。

基本上，它應該留在列表的末尾，如果列表中只有一項或沒有項目（綠色），建議框（粉紅色）應該留在底部。

關於我需要在這里設置什么的任何想法？

老實說，我對自己在做什么一無所知，所以任何建議將不勝感激。

這是我的演示： https://codepen.io/ycckgmlm-the-sans/pen/mdjxEeV

 #wrapper { text-align: center; margin: 0; font-weight: 300; float: right; border: 1px solid #000; height: 100%; background-color: #FFFFFF; bottom: 0px; color: #000433; display: block; font-size: 16px; font-style: normal; overflow-x: hidden; overflow-y: auto; position: fixed; right: 50px; top: 0px; width: 450px; } #scroller { width: 100%; display: block; } #list-wrapper { overflow-y: auto; } #green { height: 250px; width: 410px; background-color: green; margin: 20px; } #pink { height: 250px; width: 100%; background-color: pink; bottom: 0; position: sticky; }

 <div id="wrapper"> <div id="scroller"> <div id="list-wrapper"> <div id="green">Item should scroll</div> <.-- <div id="green">Item should scroll</div> <div id="green">Item should scroll</div> <div id="green">Item should scroll</div> --> <div id="pink">Pink<br>Stays on bottom and not covering up items on the list.</div> </div> </div> </div>

Answer 1

你必須改變position: sticky; 至position: absolute; #pink的

Answer 2

我改變了三件事：

• 在粉紅色元素上將粘性切換為絕對。

• 添加 margin-bottom 到 green 為 pink 元素留出空間。

• 我將包裝器設置為 position 相對，因此粉紅色元素使用此包裝器的底部

 #wrapper { text-align: center; margin: 0; font-weight: 300; float: right; border: 1px solid #000; height: 100%; background-color: #FFFFFF; bottom: 0px; color: #000433; display: block; font-size: 16px; font-style: normal; overflow-x: hidden; overflow-y: auto; position: fixed; right: 50px; top: 0px; width: 450px; } #scroller { width: 100%; display: block; } #list-wrapper { overflow-y: auto; position: relative; padding-bottom: 250px; } #green { height: 250px; width: 410px; background-color: green; margin: 20px; } #pink { height: 250px; width: 100%; background-color: pink; bottom: 0; position: absolute; }

 <div id="wrapper"> <div id="scroller"> <div id="list-wrapper"> <div id="green">Item should scroll</div> <div id="green">Item should scroll</div> <div id="green">Item should scroll</div> <div id="green">Item should scroll</div> <div id="pink">Pink<br>Stays on bottom and not covering up items on the list.</div> </div> </div> </div>

Answer 3

你可以使用flex來解決這個問題。

這是更新的答案：

將 CSS 的list-wrapper 、 green和pink更改為：

 #list-wrapper { overflow-y: auto; display: flex; flex-direction: column; justify-content: end; position: absolute; background-color: blue; top: 0; right: 0; bottom: 0; left: 0; } #green { height: 250px; width: 410px; background-color: green; margin: 20px; justify-self: start; } #pink { height: 250px; width: 100%; background-color: pink; justify-self: end; }