移动端Drawer仅展开至Navbar高度，无法全屏覆盖问题求助

一、Drawer高度受限的原因及修复 #

• 父元素overflow限制：检查你的Navbar样式，如果设置了overflow: hidden，会直接把内部Drawer的高度锁死在Navbar范围内，直接删掉这个属性即可。
• 定位层级错误：如果Drawer是嵌套在Navbar里且用了position: absolute，它的高度只会被限制在Navbar的布局空间里。把Drawer的定位改成position: fixed，同时加上top: 0、left: 0、width: 100vw、height: 100vh，让它基于整个视口来渲染，就能实现全屏覆盖。

二、Drawer被主内容遮挡的修复 #

• z-index层级问题：别只给Drawer加高z-index，还要检查父元素的层级。如果Drawer的父元素（比如Navbar）z-index设置得低，子元素的z-index再高也只能在父层级范围内生效。直接把Drawer放到Layout的根层级（和Navbar、main内容同级），然后给Drawer设置z-index: 9999这类足够大的值。
• DOM结构位置：把Drawer从Navbar的DOM结构里移出来，放到Layout组件的最外层，避免被Navbar或主内容的层级覆盖。

具体代码调整示例 #

Layout组件结构调整 #

import Navbar from './Navbar';
import Footer from './Footer';
import Drawer from './Drawer';
import { useState } from 'react';

const Layout = ({ children }) => {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="layout-wrapper">
      <Navbar onToggleDrawer={() => setDrawerOpen(!drawerOpen)} />
      {/* 把Drawer放到根层级，脱离Navbar的限制 */}
      {drawerOpen && <Drawer onClose={() => setDrawerOpen(false)} />}
      <main className="main-content">{children}</main>
      <Footer />
    </div>
  );
};

export default Layout;

Drawer样式调整（SCSS） #

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;

  &.active {
    transform: translateX(0);
  }
}

Navbar样式清理 #

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000; // 保证Navbar在主内容之上，但Drawer的z-index要比它高
  // 移除 overflow: hidden; 这行代码
}

内容的提问来源于stack exchange，提问作者Waseem Abdullahi