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

Question

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

问题是，当您使屏幕变小时，您可以在侧边栏上滚动，并且页脚是固定的，但是一些内容仍然保留在固定的div (以及滚动条)下面。

为什么会发生这种事，我该怎么解决呢？谢谢。

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

Answer 1

需要进行一些纠正。

首先，您应该为.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;