当前位置：首页 » 代码教程 » 网页不满屏幕高度时，footer始终在底部显示代码

网页不满屏幕高度时，footer始终在底部显示代码

我们在布局的时候有这样一种情况，就是当页面高度没有超过屏幕高度的时候，footer要固定到底部，而当页面超出满屏的高度的时候，footer要随着高度走。下面我们就通过CSS实现这一效果：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>footer始终居于底部</title>
<style type="text/css">
*{margin:0;padding:0; }
html, body, .sycss{height:100%;}
.sycss{height:auto;min-height:100%;_height:100%;font-size:14px;}
.main{padding-bottom:50px; }
.footer{position:relative;height:50px;line-height:50px;margin-top:-50px;background:#333;color:#fff;font-size:16px;text-align:center;}
</style>
</head>
<body>
<div class="sycss">
 <div class="main">
   <p>成功的秘诀在于坚持自己的梦想。</p>
   <p>每一次努力，都是幸运的伏笔。</p>
   <p>不要等待机会，而要创造机会。</p>
   <p>今天的努力，是为了明天的自由。</p>
   <p>从明天起，做一个幸福的人；喂马，砍柴，周游世界</p>
   <p>以积极的态度面对生活，才能感受到人生的美好！</p>
   <p>只有不断学习，才能跟上时代的步伐！</p>
   <p>岁月不居，时节如流。</p>
   <p>星光不问赶路人，时光不负有心人。</p>
   <p>每一次坚持，都是对梦想的靠近。</p>
   <p>心中有信仰，脚下有力量。</p>
   <p>每一个不曾起舞的日子，都是对生命的辜负。</p>
   <p>想，全是问题；做，才有答案‌。‌</p>
   <p>前方拥堵，但仍是最优路线‌。‌</p>
   <p>走完该走的路，才能走想走的路‌。‌</p>
   <p>在心里种花，人生才不会荒芜‌。‌</p>
   <p>大道至简，实干为要‌‌。</p>
   <p>有输得起的勇气，才会有赢得到的底气‌‌。</p>
   <p>要努力，但不要着急；繁花锦簇、硕果累累都需要过程‌‌。</p>
   <p>生活原本沉闷，但跑起来就有风‌‌。</p>
  </div>
</div>
<div class="footer">页面高度不满，底部固定</div>
</body>
</html>

End

温馨提示：如果您对本文有疑问，请在本页留言即可！！！

觉得很赞 (0)付款方式

付款方式：