React中Footer组件无法固定在页面底部的问题及解决办法

问题描述 #

React项目中Footer组件无法固定在页面底部，始终显示在页面中间位置。

问题原因 #

排查后发现是Home组件使用了h-screen类而非min-h-screen：

• h-screen将元素高度固定为当前屏幕可视高度，当页面内容高度超过屏幕高度时，元素不会自动拉伸，导致Footer被内容挤到中间；
• min-h-screen设置元素最小高度为屏幕可视高度，内容不足时占满屏幕，内容超出时自动延伸，确保Footer始终处于页面最底部。

解决方法 #

将Home组件中的h-screen替换为min-h-screen即可解决问题。

相关代码示例 #

App组件代码 #

function App() {
  return (
    <>
      <Navbar />
      <Routes>
          <Route path="/" element={ <Home /> } />
          <Route path="about" element={ <About /> } />
          <Route path="collection" element={ <Collection /> }/>
          <Route path="contact" element={ <Contact /> } />
          <Route path='*' element={ <Error /> } />
      </Routes>
      <Footer />
    </>
  )
}

Footer组件代码 #

import React from 'react'
const Footer = () => {
  return (
    <div>
      <h1>Footer</h1>
    </div>
  )
}

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