无需为body添加flex样式，如何让footer始终固定在页面底部？

完全可行，以下两种方案满足你的需求：

方案一：绝对定位法（兼容老浏览器） #

核心思路是通过绝对定位将footer固定在页面底部，同时给内容区预留footer高度避免遮挡：

• 让<html>和<body>占满整个视口高度
• 将<body>设为相对定位，作为footer绝对定位的参照容器
• 给内容主体（比如<main>）添加等于footer高度的padding-bottom
• 给footer设置绝对定位，固定在页面底部

代码实现：

<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
  <meta charset="UTF-8" />
  <title></title>
</head>
<body style="height: 100%; position: relative; margin: 0; padding: 0;">
  <header style="background-color: red;height: 30vh;"></header>
  <main style="background-color: green;height: 30vh; padding-bottom: 30vh;"></main>
  <footer style="background-color: blue;height: 30vh; position: absolute; bottom: 0; left: 0; width: 100%;"></footer>
</body>
</html>

方案二：CSS Grid布局（现代浏览器首选） #

利用Grid的弹性分配特性，让中间内容区自动填充剩余空间，footer始终处于底部——这里给<body>用Grid布局（不属于Flexbox范畴，符合你的要求）：

• 让<html>和<body>占满视口高度
• 给<body>设置Grid布局，通过grid-template-rows分配三个区域的高度：header自适应、main占满剩余空间、footer自适应

代码实现：

<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
  <meta charset="UTF-8" />
  <title></title>
</head>
<body style="height: 100%; display: grid; grid-template-rows: auto 1fr auto; margin: 0;">
  <header style="background-color: red;height: 30vh;"></header>
  <main style="background-color: green;height: 30vh;"></main>
  <footer style="background-color: blue;height: 30vh;"></footer>
</body>
</html>

方案对比 #

• 绝对定位法：兼容性拉满，适配所有主流老浏览器，适合需要兼容低版本环境的场景
• Grid布局法：代码更简洁，逻辑更直观，无需手动计算预留高度，现代浏览器（Chrome/Firefox/Edge等）都支持

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