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

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>


以上就是实现这个效果的最小代码,可根据项目设计图情况自行更改其中参数。

觉得有用请点个赞吧!
0 614