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

Content behind a fixed element when overflow

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

问题是当你缩小屏幕时，你可以在侧边栏上滚动，页脚是固定的，但一些内容仍然在固定的div（和滚动条）下面。

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

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

为侧边栏容器添加填充（固定页脚高度）

    padding-bottom: 37px;

需要进行一些更正。

首先，您应该为 .sidebar-body 而不是 .sidebar-container 设置溢出。因为您的固定页脚在 .sidebar-container 和 .sidebar-body.

的同级内

并且您应该计算 .sidebar-body 的高度，因为您必须为其设置溢出。

并在下面替换 CSS 会有帮助，

  1. 从 .sidebar-container
    2. 中移除溢出
  2. 为固定页脚添加高度，以便计算侧边栏正文的高度.sidebar-footer{height:35px;}
  3. 在下方添加CSS.sidebar-body{height: calc(100% - 35px);overflow: auto;}