Question

问题：当你固定某个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，因此重叠似乎没问题，但是，如果放大浏览器，它仍会与页脚重叠（有时依赖于浏览器和计算机的类型。）

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

提前致谢：）

Answer 1

这是解决方案的小提琴

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

你需要开始使用z-index，它就像photoshop图层一样，虽然z-index在没有position的情况下无效，所以你必须添加一个像绝对，相对和等等。

<强>更新

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

更新2

我发现这个易于使用的库我相信它会帮助你修复固定的侧面菜单，它被称为tether。希望它有所帮助。

Answer 2

您的页脚要占据底部宽度空间的100％，并且侧边栏要占据宽度的220px。在一个小屏幕上，你的菜单和页脚正争夺空间，因为一个项目占用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
}

定位固定div（或侧栏）与页脚重叠

2 个答案: