如何在React中使用百分比(%)而非vh实现粘性页脚

你的问题出在两个关键细节上：一是未给body设置100%高度，二是没让中间内容区域占据容器剩余空间。以下是具体修改方案：

1. 修正基础样式（App.scss） #

先确保html和body都撑满视口高度，同时清除默认内外边距避免布局偏移：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: gray;
}

.App {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

// 新增：让内容区域自动占满剩余空间
.main-content {
  flex-grow: 1;
}

2. 调整组件结构（App.js） #

将页脚以外的所有内容包裹在一个容器中，应用上面的main-content类：

/*Import Styles*/
import "./styles/App.scss";
import "./styles/Variables.scss";
/*Import the components*/
import Navigation from "./components/Navigation/Navigation";
import Showcase from "./components/Showcase/Showcase";
import Footer from "./components/Footer/Footer";

const App = () => {
  return (
      <div className="App">
        <div className="main-content">
          <Navigation />
          <Showcase />
        </div>
        <Footer />
      </div>
   )
}

export default App;

原理说明 #

• html和body设置height:100%，确保根容器.App能基于视口高度计算百分比，避免因内容不足导致容器高度小于视口。
• flex-grow:1会让.main-content自动占据.App容器中除页脚外的所有剩余空间，无论内容多少，页脚都会被“推”到容器底部。
• 这套方案完全依赖百分比和Flex布局，无需vh单位，天然适配移动端，也不需要固定任何元素高度。

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