html高度不满,纯CSS实现不满一屏时footer始终居底，超过一屏时footer跟随页面滚动...

前端布局经常用到页面内容不满的情况，但是底部模块又想一直居底，下面我们用纯CSS实现不满一屏时footer始终居底，超过一屏时footer跟随页面滚动的效果

css样式

html, body { margin: 0; padding: 0; height: 100%;background: #f6f6f6 }

.content { position: relative; min-height: 100%;}

.wp { padding-bottom: 100px;text-align: center;padding-top: 100px;background: #eee }

.ft { position: absolute; bottom: 0; height: 100px;background: #ddd;width: 100%;text-align: center; }

html结构

我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。

我是动态跟随的底部。内容不满一屏时，我始终居底；内容超过一屏时，我跟随在页面底部。