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

Question

正如您在下面的代码笔中看到的，我有一个小布局，包括一个固定的标题和一个固定的侧边栏。在侧边栏内部我有另一个 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;}