如何停止 position 固定在頁腳

Question

 .home{ min-height:100vh; } #sidebar_left { width: 20%; padding: 20px; position: fixed; min-height: 82vh; background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; margin-left: 6%; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height:50px; }

 <div class="home"> <div id="sidebar_left"> Content... </div> </div> <div id="footer"> </div>

我正在尋找解決在頁面頁腳處停止固定 object 的流行問題的解決方案。

我基本上在屏幕左側有一個固定的“側邊欄”框，我不希望它在頁腳上滾動，所以我需要它在頁腳上方約 10px 處停止。 我實際上需要在滾動直到頁腳出現時修復我的側邊欄。

頁腳是#footer ，如果這有什么不同，它沒有固定的高度。

如果有人可以幫助我為此創建一個簡單的解決方案，我將不勝感激！

Answer 1

在#sidebar_left css 中添加額外的底部字段

    #sidebar_left {
         ...
         bottom: 10px;
        }

連同它在下面添加頁腳 CSS：

#footer {
  position: relative;
  height: 200px;
  z-index: 1;
}

Answer 2

輸入： position: sticky 。

“粘性”元素的行為與固定元素相同，只是它不會離開其父容器。 您需要設置top 、 left 、 right或bottom之一才能使其工作。

（您可能需要全屏查看片段才能看到效果。）

 .home { min-height: 100vh; } #sidebar_left { width: 20%; padding: 20px; position: sticky; top: 6vh; left: 6%; min-height: 82vh; background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height: 100px; }

 <div class="home"> <div id="sidebar_left"> Content... </div> </div> <div id="footer"> Footer content </div>

Answer 3

我會用 go 代替position: sticky 。 使用position: sticky比使用position: fixed更好的布局控制。 此定位屬性將使側邊欄在兩個相鄰元素（頁眉和頁腳）之間自由漫游。 使用top屬性滾動時調整側邊欄的位置。

 .home { min-height: 100vh; }.header { height: 50px; background-color: black; color: white; } #sidebar_left { width: 20%; padding: 20px; position: sticky; top: 0px; min-height: 50vh; /* min-height: 82vh; */ background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; margin-left: 6%; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height: 50px; }

 <div class="home"> <div class="header">header</div> <div id="sidebar_left"> Content... </div> </div> <div id="footer"> </div>

Answer 4

請檢查一下，我進行了必要的更改，並添加了 Lorem ipsum 代替側邊欄內容，以便在側邊欄中的內容增加外觀時顯示更好的視覺表示。

 .home{ min-height:100vh; } #sidebar_left { width: 20%; padding: 20px; min-height: 82vh; background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; margin-left: 0.2%; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height: 50px; z-index: 1; position: sticky; }

 <div class="home"> <div id="sidebar_left"> Content... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div id="footer"> </div>