如何让React+Vite+TypeScript页面占满全屏并设置最小宽度

先把全局样式和容器布局的核心逻辑理顺，这是解决这类自适应高度问题的关键：

• 第一步，重置全局样式并统一背景：
  在全局CSS文件（比如index.css）中添加以下代码，消除浏览器默认边距并确保背景铺满整个页面：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    min-height: 100vh;
    background-color: #你的背景色; /* 和App容器背景色保持一致 */
  }
  

  这里用min-height:100vh而非height:100%，因为%依赖父元素高度，而vh直接基于视口高度，能保证内容较短时页面自动撑满屏幕。

• 第二步，设置App容器样式：
  给App组件去掉height:100vh，改用min-height:100vh，同时预留导航栏的空间：

  .App {
    min-height: 100vh;
    /* 若全局已设置背景色，可直接删除此行；否则保持和全局一致 */
    background-color: #你的背景色;
    padding-top: 60px; /* 数值等于导航栏高度，避免内容被导航栏遮挡 */
  }
  

  min-height:100vh会让容器在内容较短时撑满视口，内容超长时自动跟随延伸，彻底解决背景截断的问题。

• 第三步，固定导航栏：
  保持导航栏悬浮在顶部，用position:fixed实现即可：

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* 根据需求调整高度 */
    background-color: #导航栏背景色; /* 如需和页面背景区分则设置，否则可省略 */
    z-index: 100; /* 确保导航栏始终在内容上方 */
  }
  

你之前遇到的问题，本质是用height:100vh固定了App容器高度，导致内容超长时容器无法跟随延伸，背景只覆盖到视口高度，看起来像“背景边框”；而用min-height:100vh+全局min-height:100vh的组合，既能保证短内容铺满屏幕，又能让长内容自动延伸，同时保持背景色全程一致。

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