Drawer (Mobile view) 只打开到 Navbar 的高度，不覆盖整个页面

Question

我有一个页眉和页脚（高阶组件），所有其他页面都位于这些组件之间；准确的布局。对于移动视图，我创建了一个抽屉，通过单击汉堡菜单图标打开。但是，抽屉只打开到导航栏的高度，并没有覆盖整个页面。

当我打开抽屉时。

我尝试输入最高值或 z-index，它仍然在主要内容下方打开。 我正在输入代码，因为我不知道在这里做什么。哪位大侠指出我的错误

导航栏的代码：

import React, {useState} from 'react';
import {GiHamburgerMenu} from 'react-icons/gi';
import {MdClose} from "react-icons/md";
import {ImSun} from 'react-icons/im';
import {BsFillMoonFill} from 'react-icons/bs';
import logo from '../../Assets/logo.png';
import { Link } from 'react-router-dom';
import {RiHomeHeartFill} from "react-icons/ri"

const Navbar = ({changeTheme, currentTheme}) => {
  const [navState, setNavState] = useState(false);
  return (
    <nav>
      <div className="brand-container">
        <div className='brand'>
          <Link to="/"><img src={logo} alt="logo"/></Link>
        </div>
        <div className='toggle-container'>
          <div className='toggle'>
            {
              navState 
              ? 
              (<MdClose onClick={() => setNavState (false)} />) 
              : 
              (<GiHamburgerMenu onClick={() => setNavState(true)} />)
            }
          </div>
          <div className='mode' onClick={changeTheme}>
          {currentTheme === "light" ? (<BsFillMoonFill className='dark'/>) : (<ImSun className='light'/>)}
          </div>
        </div>
      </div>
      <div className={`links-container ${navState ? "nav-visible" : ""}`}>
        <div className="links-container">
          <ul className='links'>
            <li>
              <Link to="/"><RiHomeHeartFill style={{fontSize: '20px', color: '#bc414b'}}/></Link>
            </li>
            <li>
              <div className="dropdown">
                <Link to="/about">Qui Sommes-Nous</Link>
                  <div className="dropdown-content">
                    <Link to="/about">Presentation du COS</Link>
                    <Link to="/terms">Nos Journalistes</Link>
                    <Link to="/legal">Nous Rejoindre</Link>
                  </div>
              </div>
            </li>
            <li>
              <div className="dropdown">
                <Link to="/blog">Articles</Link>
              </div>
            </li>
            <li>
              <div className="dropdown">
                <Link to="/podcasts">Podcasts</Link>
              </div>
            </li>
            <li>
              <div className="dropdown">
                <Link to="/contact">Gallery</Link>
              </div>
            </li>
            <li>
              <div className="dropdown">
                <Link to="/contact">Contacts</Link>
                  <div className="dropdown-content">
                    <Link to="/press">Nous Contacter</Link>
                    <Link to="/support">Localisation</Link>
                  </div>
              </div>
            </li>
            <li onClick={changeTheme}>
              {currentTheme === "light" ? (<BsFillMoonFill className='dark'/>) : (<ImSun className='light'/>)}
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default Navbar;

SCSS 文件：

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 1rem 2rem;
    background-color: var(--background);
    font-family: var(--font-family);
    font-size: 16px;
    overflow-x: hidden;
    transition: 0.2s ease-in-out;
    .brand-container{
        .brand {
            img{
                height: 12vh;
            }
        }
        .toggle-container{
            display: none; 
            .mode{
                .dark{
                    color: black
                }
                .light {
                    color: yellow
                }
             }
         }
    }
    .links-container{
        .links{
            list-style-type: none;
            display: flex;
            gap: 3rem;
            li{
                .dropdown {
                    float: left;
                    overflow: hidden;
                  }
                  
                .dropdown-content {
                    display: none;
                    position: absolute;
                    background-color: var(--background);
                    border-radius: 6px;
                    min-width: 160px;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                    z-index: 2;
                  }
                  
                .dropdown-content a {
                    float: none;
                    color: var(--accent-color1);
                    padding: 12px 16px;
                    text-decoration: none;
                    display: block;
                    text-align: left;
                  }
                  
                .dropdown-content a:hover {
                    background-color: rgba(190, 65, 75, 0.6);
                    border-radius: 6px;
                    color: #fff;
                  }
                  
                .dropdown:hover .dropdown-content {
                    display: block;
                }
                a{
                    color: var(--accent-color1);
                    text-decoration: none !important;
                }
                &:nth-last-child(2){
                    a{
                        color: var(--pink);
                    }
                }
                .dark{
                    color: black;
                    text-decoration: none;
                }
                .light {
                    color: yellow;
                    text-decoration: none;
                }
            }
         }
     }
     @media screen and (min-width:280px) and (max-width:1080px){
        position: relative;
        padding: 1rem 2rem;
        .brand-container{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            .brand{
                img{
                    height: 3.5rem
                } 
            }
            .toggle-container{
                display: block;
                color: var(--accent-color1);
                display: flex;
                flex-direction: row-reverse;
                gap: 1rem;
                z-index: 2;
                .toggle{
                    z-index: 2;
                    display: block
                }
            }
        }
        .links-container{
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;
            display: flex;
            padding-top: 15vh;
            justify-content: left;
            padding-left: 5vw;
            height:100vh;
            transition: 0.6s ease-in-out;
            background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), linear-gradient(101deg, var(--pink), var(--orange));
            .links{
                flex-direction: column;
                li{
                    a{
                        color: var(--background);
                    }
                    &:last-of-type{
                        display: none;
                    }
                    &:nth-last-child(2){
                        a{
                            color: var(--background);
                        }
                    }
                }
            }
        }
        .nav-visible{
            width: 80vw;
            visibility: visible;
            opacity: 1;
        }
     }
} 

和布局文件：

import React, {useState, useEffect} from 'react';
import scrollreveal from 'scrollreveal';
import { Outlet } from 'react-router-dom';
import Navbar from '../Header/Header';
import Footer from '../Footer/Footer';

const Layout = () => {
  const [theme, setTheme] = useState('light');
  const changeTheme = () => {
    theme === 'light' ? setTheme("dark") : setTheme("light")
  };
  useEffect(()=> {
    const registerAnimations= () => {
      const sr = scrollreveal({
          origin: "bottom",
          distance: "20px",
          duration: 1000,
          reset: false,
        });
        sr.reveal(
          `.free, .clients, .super-rare, .releases, .like, .signup, footer`, {interval: 500}
        );
      };
      registerAnimations();
    }, 
  []);
  window.setTimeout(() => {
    const home = document.getElementsByClassName("home");
    home[0].style.transform = "none";
    const nav = document.getElementsByTagName("nav");
    nav[0].style.transform = 'none'
  }, 1500);
  return (
  <>
    <div data-theme={theme} className="page-container">
      <div>
        <Navbar changeTheme={changeTheme} currentTheme= {theme}/>
      </div>
      <div>
        <Outlet/>
      </div>
      <div>
        <Footer/>
      </div>
    </div>
  </>
  )
}

export default Layout

如果其他组件有任何问题，我也会添加 GitHub 链接。 https://github.com/Iamthewaseem/CADA

这是我想要显示的内容，隐藏在主体内容下方。

Answer 1

添加

height: 100vh

到

nav

nav{
    display: flex;
    min-height: 100vh;
/* the rest of scss code!*/

更改这部分代码：

.links-container{
        .links{
            li{
                overflow:hidden;