纯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结构

<div class="content ">
    <div class="wp">
        <div class="main" >
            我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。我是主内容区，尝试增加或减少内容，或者改变浏览器高度来查看效果。
        </div>
       
        <div class="ft v-center">
            我是动态跟随的底部。内容不满一屏时，我始终居底；内容超过一屏时，我跟随在页面底部。
        </div>
    </div>
</div>

预览地址：https://www.umming.com/demo/1495/