Sticky footers实现方法

时间：5年前阅读：4732

在网页设计中，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,我们将及时处理。

微信扫码关注

更新实时通知

Sticky footers实现方法

网友评论