CSS调整移动端响应式菜单背景层垂直延伸至页面底部

嘿，这个问题我之前做移动端菜单的时候也踩过坑！让我来帮你解决～

首先，咱们先搞清楚问题出在哪：你用了position: absolute加上height: 100%，这里的100%是相对于背景层最近的非static定位父元素的高度。如果父元素（比如body）没有设置足够的高度，它就只会覆盖当前视口的范围，而不是整个页面的高度。

要实现背景层覆盖整个页面，同时允许用户滚动，你可以按下面的步骤调整：

1. 给根元素和body设置基础高度 #

首先确保html和body能撑满整个页面高度，这样背景层的高度才有正确的参考：

html, body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  position: relative; /* 让背景层的absolute定位以body为基准 */
}

2. 调整背景层的样式 #

修改你的背景层CSS，去掉无效的content: ""（这个属性只对伪元素生效，普通<a>元素用不上），然后确保高度能覆盖整个页面：

.backdrop.expanded, .main-menu[aria-expanded="true"] + .backdrop {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* 现在会继承body的高度，也就是整个页面的高度 */
  z-index: 998;
  background: rgba(0,0,0,.5);
  cursor: default;
}

额外注意事项 #

• 别给body加overflow: hidden，否则页面会被锁定无法滚动，这和你的需求冲突。
• 如果你的页面内容是动态加载的，这个方案也能自动适配页面高度变化，因为min-height: 100vh会让body自动撑高。

这样调整后，背景层就会延伸到页面最底部，同时用户依然可以正常滚动页面啦！

内容的提问来源于stack exchange，提问作者Oliver Williams