59、实现：页头在顶部，页脚永远在页面底部
这个题本质上是经典的sticky footer（粘性页脚）布局。
要求是：
- 页头始终在顶部
- 主体内容在中间
- 页脚在页面底部
- 当内容不够高时，页脚也不能跑到中间，要贴到页面最底部
- 但页脚不是 fixed 在窗口底部，内容很多时它应该被正常撑到页面最后
推荐方案：flex布局
这是现在最简单、最稳的做法。
HTML
<body> <div class="page"> <header class="header">页头</header> <main class="main">主体内容</main> <footer class="footer">页脚</footer> </div> </body>CSS
html, body { height: 100%; margin: 0; } .page { min-height: 100vh; display: flex; flex-direction: column; } .header { height: 60px; background: #409eff; color: #fff; } .main { flex: 1; background: #f5f5f5; } .footer { height: 80px; background: #333; color: #fff; }为什么这样能实现？
关键在这两句：
.page { min-height: 100vh; display: flex; flex-direction: column; }表示整个页面容器最小高度占满一屏，并且纵向排列。
然后：
.main { flex: 1; }意思是主体内容区域自动占据剩余空间。
所以：
- 如果内容少，
main会撑开，把footer顶到底部 - 如果内容多，页面整体会被内容撑高，
footer会自然出现在内容最后面
这正好满足题意。
更简洁的写法
如果不包.page容器，也可以直接让body做布局容器。
HTML
<body> <header>页头</header> <main>主体内容</main> <footer>页脚</footer> </body>CSS
html, body { height: 100%; margin: 0; } body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; }面试回答可以这么说
这题可以用 Flex 布局实现 sticky footer。
让页面最外层容器设置min-height: 100vh，并使用display: flex; flex-direction: column;。
再让主体内容区域设置flex: 1占满剩余空间。
这样当内容不足一屏时，主体会自动撑开，把页脚顶到页面底部；当内容很多时，页脚会自然出现在内容之后，而不是固定在窗口底部。
完整可运行示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>sticky footer</title> <style> html, body { margin: 0; height: 100%; } .page { min-height: 100vh; display: flex; flex-direction: column; } .header { height: 60px; line-height: 60px; text-align: center; background: #409eff; color: white; } .main { flex: 1; padding: 20px; background: #f5f5f5; } .footer { height: 80px; line-height: 80px; text-align: center; background: #333; color: white; } </style> </head> <body> <div class="page"> <header class="header">页头</header> <main class="main"> 主体内容 </main> <footer class="footer">页脚</footer> </div> </body> </html>如果面试官追问：为什么不能用position: fixed？
因为题目要求的是：
页脚永远在页面底部，不是窗口底部
而fixed是固定在浏览器视口底部，会一直悬浮在页面上，不符合题意。
旧方案：绝对定位 + padding/margin 预留
以前也有人这么写，但不如flex好维护。
例如：
html, body { height: 100%; margin: 0; } .page { min-height: 100%; position: relative; padding-bottom: 80px; /* 预留 footer 高度 */ box-sizing: border-box; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }这个方案的问题是：
- 必须知道 footer 高度
- 维护成本高
- 容易重叠
所以现代写法优先flex。
最终推荐答案
<body> <div class="page"> <header>Header</header> <main>Main Content</main> <footer>Footer</footer> </div> </body>html, body { margin: 0; height: 100%; } .page { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; }