溢出後固定元素後面的內容

Question

您可以在下面的codepen中看到，我有一個小布局，包括一個固定標題和一個固定側欄。在側邊欄中我有另一個div固定在底部，所以我想滾動側邊欄菜單，但側邊欄頁腳固定在底部（所以我將屬性overflow: auto;添加到側邊欄中。

問題是當你縮小屏幕的時候，你可以滾動邊欄和頁腳是固定的，但是一些內容仍然在固定div（和滾動條）下。

爲什麼會發生這種情況，我該如何解決它？謝謝。

https://codepen.io/anon/pen/qXmxXa

Answer 1

需要進行一些更正。

首先，你想設置爲溢出.sidebar體代替.sidebar容器。因爲您的固定頁腳位於.sidebar-container和.sidebar-body的同級。

而且您需要計算.sidebar-body的高度，因爲您必須對其設置溢出。

而且和替換以下CSS將幫助，

1. 刪除溢出.sidebar-container
2. 添加高度爲您的固定頁腳，這樣就可以計算出側邊欄體的高度.sidebar-footer{height:35px;}
3. 添加以下CSS .sidebar-body{height: calc(100% - 35px);overflow: auto;}

Answer 2

添加填充物爲您側欄容器（固定頁腳高度）

padding-bottom: 37px;