在网页设计中，Sticky footers设计也是最比较常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
常见的实现方法是对(.sticky)footer进行绝对定位，假设高度为50px。对父级(.box)进行相对定位，将html、body的高度设置为100%，父级(.box)的最小高度设置为100%，将(.content)内容部分设置padding-bottom为footer的高度，即50px，这里不用margin-bottom是因为会出现margin-bottom传递的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{height:100%}
body{margin:0}
.box{position:relative;background-color:lightblue;min-height:100%;}
.content{padding-bottom:50px;}
.sticky{position:absolute;background-color:lightgreen;width:100%;height:50px;bottom:0;}
</style>
</head>
<body>
<div class="box">
<main class="content">
想想我当初“三个月学会编程”的计划，不觉莞尔。计划从三个月变成一年，又从一年改到三年，再然后从三年到十年……我就这样磨磨蹭蹭的一路走了过来？
现在回想起来两年的创业感觉像是一场关于管理的实验，在企业过程中不断的尝试不同的管理办法。却一直没有找到办法去盈利。画饼的方式随着时间的推移渐渐的不能满足员工以及投资者的耐心。最后公司融资失败，CEO离场，我们也陆续离场。今天面试的时候我还特意访问了一下之前的网站和APP，发现主站首页报的Redis错误好像已经很久没有人管了。值得欣慰的是在创业的两年时间里读完了研究生课程。
</main>
<footer class="sticky"></footer>
</div>
</body>
</html>
效果图片：
原文链接：https://www.qiquanji.com/post/8067.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知