在较小的屏幕上按下汉堡菜单时，如何覆盖整个屏幕？

Bootstrap提供了一个类来覆盖内容和不同的样式属性，以使其看起来更具吸引力。要使用.nav-bar填充视口或整个屏幕，请更改高度。

.navbar-nav{
min-height: 100vh;
}

例子：

  

    
    
        body {
            font-family: 'Lato', sans-serif;
        }
          
        .overlay {
            height: 100%;
            width: 0;
            position: fixed;
            background-color: rgb(255, 255, 255);
            background-color: rgba(0, 96, 128, 0.9);
            overflow-x: hidden;
            transition: 0.5s;
        }
          
        .overlay-content {
            position: relative;
            top: 25%;
            width: 100%;
            text-align: center;
            margin-top: 30px;
        }
          
        .overlay a {
            padding: 8px;
            text-decoration: none;
            font-size: 36px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }
          
        .overlay a:hover,
        .overlay a:focus {
            color: #f1f1f1;
        }
          
        .overlay .closebtn {
            position: absolute;
            top: 20px;
            right: 45px;
            font-size: 60px;
        }
          
        @media screen and (max-height: 450px) {
            .overlay a {
                font-size: 20px
            }
            .overlay .closebtn {
                font-size: 40px;
                top: 15px;
                right: 35px;
            }
        }
    

  

  
    
        ×
        
        
            Login
            SignUp
            AboutUs
            ContactUs
        
    
  
    GeeksforGeeks
Menu
    
    Overlay the content
    
        function openNav() {
            document.getElementById(
              "myNav").style.width = "100%";
        }
  
        function closeNav() {
            document.getElementById(
              "myNav").style.width = "0%";
        }
    
  

  

输出：
桌面视图：

行动检视：