React Web应用页面元素无法全屏显示的问题排查求助

问题描述 #

我的React Web应用页面元素不多，但无法实现全屏显示，页面存在顶部、侧边及底部留白。当前使用的CSS及JSX代码如下：

现有CSS代码 #

html {
  height: 100%; width: 100%;
}
* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  min-height: 100vh;
  display:block;
  position: fixed;
  object-fit: cover;  
  z-index: -2;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-position-y: -24em;
  background-size: 100% 100%;
}

现有JSX代码 #

return (
  <>
    <Navbar />
    <div className='header-div'>
      <h3 className='text-above'>
        -------   A HIKING GUIDE
      </h3>
      <div className='main-text'>
        Be Prepared For The Mountains And Beyond!
      </div>
    </div>
  </>
);

解决方案 #

问题出在body的CSS设置上，以下是修正后的代码：

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  width: 100%;
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}

关键修改说明： #

• 移除body的position: fixed、right: 0、bottom: 0：固定定位会让元素脱离正常文档流，导致无法铺满视口
• 调整背景定位与尺寸：将background-position设为center center，background-size改为cover，保证背景图自适应铺满整个视口，同时移除固定的background-position-y偏移
• 补充html和body的内外边距重置：明确设置margin: 0和padding: 0，消除默认样式导致的留白
• 移除无效属性object-fit: cover：该属性仅作用于图片、视频等替换元素，对body无意义

另外需检查Navbar组件是否自带内外边距，若有需同步将其margin和padding设为0，避免影响全屏效果。

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