Sticky footers实现方法
在网页设计中，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,我们将及时处理。
微信扫码关注
更新实时通知