期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

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,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册