溢出后固定元素后面的内容

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;