当前位置：首页 » 代码教程 » 网页不满屏幕高度时，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>