React+Vite+TS项目页面底部空白问题求助

问题描述 #

在React+Vite+TS项目中使用两张图片作为首页背景时，调整浏览器窗口或在移动端查看，页面底部会出现大量空白。尝试过height:100%、100vh等样式组合均无效，排查确认Hero区块是问题根源。

Hero区块代码：

<Container fluid style={{ margin: '0', padding: '0', overflowX: 'hidden'}}>
  <Row>
    <Col>
      <div style={{ position: 'relative'}}>
        <Image src={home_goat_farm2} alt="image1" fluid style={{ width: '100vw' }} />
        <div style={{ 
          position: 'absolute',
          top: '12.5%',
          left: '50%',
          transform: 'translate(-50%, -12.5%)',
          textAlign: 'center',
          color: 'white',
          width: '100%'
        }}>
          <h1 style={{/* 一些样式 */}}>Welcome to MyFarm</h1>
          <p style={{/* 一些样式 */}}>We grow organic produce for a healthier you</p>
          <p style={{/* 一些样式 */}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        </div>
      </div>
    </Col>
  </Row>
  <div style={{ position: 'relative' }}>
    <Row>
      <Col>
        <Image src={goats} fluid style={{padding: 0 , margin: 0, border: 0, width: '100vw'}} />
      </Col>
    </Row>
  </div>
</Container>

全局样式（main.tsx）：

const GlobalStyle = createGlobalStyle`
  html, body {
      background-color: lime;
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
  }
`

解决方案 #

1. 修复图片宽度导致的横向溢出 #

给图片设置width:100vw会让图片超出Bootstrap容器的宽度限制，触发横向滚动条，进而导致底部空白。

• 将图片的width:100vw改为width:100%，让图片继承父容器（Col）的宽度，避免溢出。
• 使用Bootstrap内置类p-0、m-0替代行内样式的padding/margin设置，保持代码一致性。

2. 调整全局样式的高度设置 #

全局样式中html, body的height:100%仅让元素占满当前视口高度，当内容超出视口时会出现空白。修改为：

const GlobalStyle = createGlobalStyle`
  html, body {
      background-color: lime;
      margin: 0;
      padding: 0;
      min-height: 100vh; /* 用min-height确保内容超出时能撑开高度 */
      width: 100%;
      overflow-x: hidden; /* 全局禁止横向滚动，避免溢出问题 */
  }
`

3. 简化Hero区块结构并优化布局 #

• 移除多余的嵌套div（比如包裹第二行的position:relative div，无实际作用）。
• 给Row添加g-0类，移除默认的gutter间距，避免布局偏移。

修改后的Hero区块代码：

<Container fluid className="p-0 m-0 overflow-hidden">
  <Row className="g-0">
    <Col className="p-0">
      <div style={{ position: 'relative' }}>
        <Image 
          src={home_goat_farm2} 
          alt="image1" 
          fluid 
          style={{ width: '100%' }} 
        />
        <div style={{ 
          position: 'absolute',
          top: '12.5%',
          left: '50%',
          transform: 'translate(-50%, -12.5%)',
          textAlign: 'center',
          color: 'white',
          width: '100%'
        }}>
          <h1 style={{/* 一些样式 */}}>Welcome to MyFarm</h1>
          <p style={{/* 一些样式 */}}>We grow organic produce for a healthier you</p>
          <p style={{/* 一些样式 */}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        </div>
      </div>
    </Col>
  </Row>
  <Row className="g-0">
    <Col className="p-0">
      <Image 
        src={goats} 
        fluid 
        className="border-0" 
        style={{ width: '100%' }} 
      />
    </Col>
  </Row>
</Container>

4. 验证图片的fluid属性 #

确保Image组件的fluid属性正常工作，它会自动根据父容器宽度调整图片尺寸，避免图片拉伸或溢出。

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