沿頁面滾動 Div，停在自身底部（如 Twitter）

Question

我被困在某個時刻。 我正在嘗試做一個三欄頁面布局。 中間部分用於帖子，右側部分用於其他鏈接和參考等（有點長）。 左邊是固定的。

我的問題是； 當右 div 到達底部時，如何阻止它移動？ 如果中間 div 的內容較短，那么右邊也有一個用於右邊 div 頁面的滾動條。 就像 Twitter 一樣。

我試着做一些頭腦風暴。 並認為 Twitter 可能會為這些部分制作雙 div。 一種是正常的，另一種是固定底呢。 所以正常的一個拉伸頁面進行滾動，而另一個則粘在它上面。 但我不確定我是否正確。

或者是否可以使用純 CSS？ （我也在使用TailwindCSS ）

反正; 這是我的想法的介紹。 （或者你可以簡單的看一下 twitter 主頁提要）

這里還有一個 gif；

點擊

Answer 1

您可以在需要停止position: sticky; bottom: 0 position: sticky; bottom: 0

有關更多信息，請參閱 Stackoverflow 上的以下帖子“位置：粘性；” 物業工作？

希望這能回答你的問題！

編輯： [試試這個]

 .main { width: 100%; height: 1000px; display: flex; }.first { width: 30%; background-color: red; }.second { width: 40%; background-color: green; }.third { width: 30%; background-color: blue; height: 500px; position: sticky; top: 0px; } p { margin-left: 20px; }

 <div class="main"> <div class="first"> <p> Left content. </p> </div> <div class="second"> <p> Main content. </p> </div> <div class="third"> <p> Right content. </p> </div> </div>