Footer 固定在底部有哪些写法？

⚡ 速记答案（30 秒）

视口固定（永远吸底）：position:fixed; bottom:0。内容不足时吸底、溢出时跟随：min-height:100vh; display:flex; flex-direction:column; main 设 flex:1，footer 自然贴底。

📖 详细讲解

标准面试回答（推荐记住）

Footer 固定底部有两种场景。第一种是永远吸在视口底部，用 position: fixed，设置 bottom: 0、left: 0、right: 0。第二种是内容不足时 footer 贴底、内容溢出时 footer 跟随内容，用 Flex 布局：容器 min-height: 100vh、display: flex、flex-direction: column，主内容区 flex: 1，footer 自然就会贴在底部。后者更常用，用户体验更好。

✅ 面试要点

•fixed 永远吸底
•Flex + min-height 更优雅
•注意区分两种场景

💻 代码示例

Sticky Footer

<style>
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
}
.footer {
  background: #1a1a1a;
  padding: 20px;
}
</style>

<div class="page">
  <main class="main">内容区</main>
  <footer class="footer">Footer</footer>
</div>

🎨 效果预览