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

Question

正如您在下面的codepen中看到的，我有一个小布局，包括固定标题和固定侧边栏。在侧边栏内部我有另一个div固定在它的底部，所以我想滚动侧边栏菜单，但侧边栏页脚固定在底部（所以我将属性overflow: auto;添加到侧边栏。

问题在于，当您将屏幕缩小时，可以滚动侧边栏并固定页脚，但某些内容仍保留在固定div（以及滚动条）下。

为什么会发生这种情况，我该如何解决？感谢。

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

Answer 1

需要进行一些更正。

首先，您可以设置 .sidebar-body 的溢出，而不是 .sidebar-container 。因为您的固定页脚位于.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;