我们在布局的时候有这样一种情况，就是当页面高度没有超过屏幕高度的时候，footer要固定到底部，而当页面超出满屏的高度的时候，footer要随着高度走。下面我们就通过CSS实现这一效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页底部固定解决方案 - 内容不足时Footer始终在底部</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.header {
background-color: #409EFF;
color: white;
padding: 1rem;
text-align: center;
}
.main-content {
flex: 1;
padding: 21rem;
}
.footer {
background-color: #409EFF;
color: white;
text-align: center;
padding: 1rem;
width: 100%;
}
</style>
</head>
<body>
<header class="header">
<h1>网站标题 - 微安博客</h1>
</header>
<main class="main-content">
<h2>主要内容区域</h2>
<p>这里是网页的主要内容。当内容较少不足一屏时，页脚会固定在底部；当内容超过一屏时，页脚会正常跟随在内容后面。</p>
</main>
<footer class="footer">
<p>© 2025 微安博客. 版权所有</p>
</footer>
</body>
</html>实现原理说明：
- Flexbox布局：使用flex布局将body设置为垂直方向的flex容器
- 高度设置：html和body元素设置为100%高度
- 内容伸缩：主内容区域设置flex: 1使其自动填充剩余空间
- 页脚固定：footer始终位于flex容器底部
- 这种方法不需要JavaScript，纯CSS实现，兼容现代浏览器，是当前最推荐的底部固定解决方案。
优化建议：
- 如果需要在旧版浏览器上兼容，可以添加一些flexbox的前缀
- 可以根据实际需求调整padding和margin值
- 可以添加最大宽度限制和居中显示使布局更美观
文章采用：署名-非商业性使用-相同方式知识共享 署名 4.0 协议国际版 (CC BY-NC-SA 4.0) 许可协议授权。
免责声明：本页面资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服并出示版权证明以便删除。
免责声明：本页面资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服并出示版权证明以便删除。