定位与页脚重叠的固定 div（或侧边栏）答案

【问题标题】：Position fixed div (or side bar) overlapping with footer定位与页脚重叠的固定 div（或侧边栏）
【发布时间】：2017-04-20 04:59:45
【问题描述】：

问题：当您固定某个 div 的位置时（通常用作侧边栏或侧边菜单之类的东西），并且如果您继续向下滚动，该 div 会与页脚重叠。

body {
  margin: 0;
}
#header {
  width: 100%;
  height: 290px;
  background-color: #07CB6F;
}
#body {
  width: 100%;
  height: 3450px;
  background-color: #2FA3F7;
}
#body_inner {
  width: 1280px;
  height: 3450px;
  margin: 0 auto;
}
#side_menu {
  width: 220px;
  height: 270px;
  position: fixed;
  background-color: #ffffff;
}
#footer {
  width: 100%;
  height: 200px;
  background-color: #FF00AB;
}

<div id="header">
</div>
<div id="body">
  <div id="body_inner">
    <div id="side_menu"></div>
  </div>
</div>
<div id="footer">
</div>

这次我没有使用任何 jquery。使用上面给出的代码，由于#side_menu 设置为height: 270px，重叠似乎没问题，但是，如果放大浏览器，它仍然与页脚重叠（有时取决于浏览器的类型和计算机）。

我想知道它为什么会发生，以及如何解决（或防止）它。

提前致谢:)

【问题讨论】：

我使用您的代码创建了一个 sn-p，但我认为您没有向其中添加所有相关代码（它看起来很糟糕）。请通过添加所有相关代码进行编辑以创建您的问题的minimal reproducible example。按文本下方的edit，然后按Edit this sn-p。添加相关的 CSS。每个面板中的 html 和/或 JavaScript。此外，如果需要，添加任何相关的外部资源（.js 或 .css 文件），直到您描述的问题可以在 sn-p 中遇到。尽量减少代码。
你的意思是重叠？在整页中打开 sn-p，滚动到最后并将其放大 150%。
如果不使用javascript，则无法使用旧版（盒子模型）解决此问题。选择一个插件listed here 来实现此行为。我个人最喜欢的是lockfixed。

标签： html css

【解决方案1】：

这里有一个解决方案

https://jsfiddle.net/stc0ogy2/1/

你需要开始使用z-index，它就像photoshop图层一样工作，尽管z-index在没有position的情况下将无法工作，所以你必须添加一个绝对位置、相对位置等。

更新

正如@AndreiGheorghiu 所说，您应该使用一些javascript 以获得更好的解决方案，从他给您的list 中选择一个库。

更新 2

我发现了这个易于使用的库，我相信它可以帮助您使用固定侧边菜单，它被称为tether。希望对您有所帮助。

【讨论】：

它不再与页脚重叠，而是与页眉重叠。我认为这不是 OP 想要的。
同样的解决方案兄弟！没那么难！我已经更新了小提琴@AndreiGheorghiu
如何覆盖侧边栏，Khaled？这个想法不是覆盖它，而是阻止它与页眉和页脚重叠。用内容填充它，看看它是否仍然看起来像一个专业的，甚至是好的想法......
要专业地做到这一点，您需要一些 javascript 或诸如 bootstrap affix 之类的库，而这正是 CSS 的能力！ @AndreiGheorghiu
我的意思是，哈立德。看看我在问题下的评论，也许？它也恰好是正确的答案。

【解决方案2】：

您的页脚希望占据底部 100% 的宽度空间，而侧边栏希望占据 220 像素的宽度。在一个小屏幕上，您的菜单和页脚正在争夺空间，因为从数学上讲，一个项目占用 100% 的空间而另一个项目紧挨着它在数学上是不可能的。

在大多数桌面上，您不会注意到全屏显示问题，因为您的菜单太高而无法引起注意。

理想情况下，在声明要使用的菜单和页脚的宽度时

calc()

启用调整大小而不会导致重叠。

https://jsfiddle.net/nu8av25m/ 一个简单的例子，我把它放在一起来演示它是如何工作的。

<body>
    <div class="navigation">menu</div>
    <div class="main">main body</div>
    <footer>footer</div>
</body>

.navigation {
    Width:50px;
    Height:100%;
    Background-color: red;
    Float:left
}

.main{
    Width: calc(100% - 200px);
    Height: calc(100% - 100px);
    Background-color: blue;
    Right:0;
}

Footer{
    Width: calc(100% - 100px);
    Height: 50px;
    Background-color:green;
    Bottom: 0
}

【讨论】：

感谢您的建议，但您没有回答我的问题！