オーバーフローしたときの固定要素の背後にあるコンテンツ

Question

以下のcodepenでわかるように、固定ヘッダーと固定サイドバーを含む小さなレイアウトがあります。サイドバーの内側に別のdivがありますので、サイドバーのメニューをスクロールしたいのですが、サイドバーのフッターを下に固定します（overflow: auto;のプロパティをサイドバーに追加します）。

問題は画面を小さくすると、サイドバーをスクロールしてフッターを固定することができますが、一部のコンテンツは固定div（およびスクロールバー）の下に残ります。

どうしてこのようなことが起こりますか？ ？ありがとう。

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

Answer 1

。

まず、あなたは.sidebar-体代わりの.sidebarコンテナのためのオーバーフローを設定すると仮定されています。あなたの固定フッターは.sidebar-containerの中にあり、兄弟は.sidebar-bodyです。

そして、オーバーフローを設定する必要があるので、高さは.sidebar-bodyと計算されます。あなたは.sidebar-footer{height:35px;}

はCSS .sidebar-body{height: calc(100% - 35px);overflow: auto;}

の下に追加サイドバー-体の高さを計算することができるように .sidebar-container

から

とし、CSSの下に置き換えるのに役立ちます、

1. 削除オーバーフローは、あなたの固定フッターの高さを追加します。

Answer 2

があなたのためにパディングを追加いくつかの修正が行われる必要があるサイドバーのコンテナ（固定フッターの高さ）

padding-bottom: 37px;