固定定位Grid网格页脚遮挡站点内容的解决方法咨询

你的底部导航<footer>设置了position: fixed固定定位，会脱离常规文档流，不会在页面底部占据实际布局高度，因此页面内容滚动到底部时，会直接显示在固定定位的导航下方，被导航遮挡。

• 第一步：先设置默认状态的底部预留边距，修改#content的样式，给底部预留出导航默认高度的空间：

#content {
  max-width: 720px;
  /* 最后一个参数为底部外边距，数值大于等于导航默认高度即可 */
  margin: 100px auto 70px;
}

如果你的固定定位左右侧边栏也存在被导航遮挡的情况，可同步调整侧边栏的位置限制：

#divleft, #divright {
  /* 限制侧边栏最低位置高于导航，避免被遮挡 */
  bottom: 70px;
}
#divleft {
  /* 调整垂直偏移量，避免侧边栏内容超出视口 */
  transform: translate(-50%, calc(-50% - 35px));
}
#divright {
  transform: translate(50%, calc(-50% - 35px));
}

• 第二步：适配移动端菜单展开的动态高度，修改你的JS切换函数，在菜单展开/收起时动态调整内容区的底部边距，适配导航的实时高度：

function myFunction() {
  var nav = document.getElementById("myNavbar");
  var content = document.getElementById("content");
  if (nav.className === "navbar") {
    nav.className += " responsive";
    // 展开后取导航实际高度加少量余量设置为内容底部边距
    content.style.marginBottom = nav.offsetHeight + 20 + 'px';
  } else {
    nav.className = "navbar";
    // 收起后恢复默认预留边距
    content.style.marginBottom = '70px';
  }
}

内容的提问来源于stack exchange，提问作者Costas。