如何让 Bootstrap 登录页真正占满全屏（解决页面被截断问题）

本文详解如何修复 bootstrap 登录页在全屏模式下仅显示一半、底部留白严重的问题，核心在于修正 `.sidenav` 与 `.main` 的布局冲突，并通过合理设置宽度、定位与垂直居中逻辑，实现响应式全屏登录界面。

在使用 Bootstrap 构建登录页时，一个常见却易被忽视的问题是：页面内容（如登录表单）只占据视口上半部分，下方大片区域为纯白背景——看似“全屏”，实则布局塌陷。根本原因在于 CSS 中对侧边栏（.sidenav）和主内容区（.main）的尺寸与定位控制不当。

原代码中，媒体查询 @media screen and (min-width: 768px) 内强制设置了：

.sidenav { width: 40%; }
.main { margin-left: 40%; }

这导致：

• .sidenav 仅占视口宽度的 40%，且未设 position: fixed 时仍参与文档流；
• .main 被向右推移 40%，但自身无明确宽度约束，实际渲染宽度不足，且其父容器（即 ）错误地包裹了本应并列的 .main —— HTML 结构语义错位是根源。

  ✅ 正确解法分三步：

  1. 修正 HTML 结构语义

  .sidenav 和 .main 应为同级兄弟容器，而非父子嵌套。否则 .main 永远被限制在 .sidenav 的内容区域内。修改后结构如下：

  
    
      
        
  Chartcel 
   Login Page
        
  Login or register from here to upload your desired spreadsheet.
      
    
  
    
      
        
          
            
  
              
                Username
                
              
              
                Password
                
              
              Login
              Register
            
          
        
      
    
  

  ? 提示：使用 container-fluid h-100 d-flex align-items-center justify-content-center 实现真正的垂直+水平居中，避免依赖 margin-top: 80% 这类脆弱数值。

  2. 重写关键 CSS 规则

  移除所有破坏全屏布局的硬编码偏移，采用现代 Flex/Grid 布局逻辑：

  /* 全局重置与基础 */
  body {
    font-family: "Lato", sans-serif;
    margin: 0;
    min-height: 100vh;
  }
  
  /* 左侧深*栏（固定定位，覆盖全高） */
  .sidenav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 40%;
    background-color: #000;
    color: white;
    padding: 20px;
    overflow-y: auto;
    z-index: 10;
  }
  
  .login-main-text {
    padding: 60px 30px;
  }
  
  .login-main-text h2 {
    font-weight: 300;
    line-height: 1.3;
  }
  
  /* 主内容区（占据剩余 60% 宽度，自适应高度） */
  .main {
    margin-left: 40%;
    height: 100vh;
    padding: 20px;
  }
  
  /* 响应式断点优化 */
  @m
  edia (max-width: 767.98px) {
    .sidenav {
      width: 100%;
      position: relative;
      height: auto;
    }
    .main {
      margin-left: 0;
    }
  }
  
  /* 表单增强样式 */
  .login-form {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .form-label {
    font-weight: 500;
  }
  
  .btn-black {
    background-color: #000 !important;
    color: #fff;
    border: none;
  }

  3. 注意事项与最佳实践

  • ❌ 避免在 .sidenav 内嵌套 .main：这违反布局层级逻辑，导致子元素无法突破父容器边界；
  • ✅ 使用 vh 单位（如 height: 100vh）确保高度撑满视口，而非依赖 height: 100%（需父元素有明确高度）；
  • ✅ 在大屏下用 fixed + width 划分左右区域；小屏时自动切换为上下堆叠布局；
  • ✅ 所有按钮、输入框添加 w-100 或 max-width 控制，防止在窄屏溢出；
  • ? 调试技巧：在浏览器开发者工具中临时禁用 .sidenav { width: 40% }，观察是否恢复全屏——这是快速验证问题根源的方法。

  通过以上调整，你的登录页将真正实现「视觉全屏」：左侧深色信息栏固定显示，右侧表单区域随窗口缩放自适应居中，无白边、无截断，且在手机、平板、桌面端均表现一致。