imPony 发布于：2017-09-22 11:49:54
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>纯 CSS 实现不满一屏时 footer 始终居底，超过一屏时 footer 跟随页面滚动</title>
<style>
html, body { margin: 0; padding: 0; height: 100%; }
.content { position: relative; min-height: 100%; }
.wp { padding-bottom: 100px; }
.ft { position: absolute; bottom: 0; height: 100px; }
</style>
</head>
<body>
<div class="content">
<div class="wp">
<div class="main">
我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。
</div>
<div class="ft">
我是动态跟随的底部。内容不满一屏时，我始终居底；内容超过一屏时，我跟随在页面底部。
</div>
</div>
</div>
</body>
</html>以上就是实现这个效果的最小代码，可根据项目设计图情况自行更改其中参数。
登录后可以留言提问！
微信扫码登录
