footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位
HTML代码:
<body> <header>头部</header> <main>中间内容</main> <footer>底部信息</footer> </body>
CSS代码:
*{ margin:0; padding:0; } html{ height:100%; } body{ min-height:100%; margin:0; padding:0; position:relative; } header{ background: #000; text-align: center; height:50px; line-height: 50px; color:#fff; } main{ /* main的padding-bottom值要等于或大于footer的height值 */ padding-bottom:100px; background:#ccc; text-align: center; } footer{ position:absolute; color:#fff; bottom:0; width:100%; height:100px; line-height:100px; text-align:center; background-color: #000; }
实现的效果:
- 首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;
- 其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;
- 最后,设置footer绝对定位,并
设置height为固定高度值。
优点:footer一直存在于底部。
缺点:中间区域main如果内容不够,不能撑满页面的中间区域。
方法二:footer高度固定+margin负值
HTML代码:
<body> <div class="container"> <header>头部</header> <main>中间内容</main> </div> <footer>底部信息</footer> </body>
CSS代码:
*{ margin:0; padding:0; } html,body{ height:100%; } .container{ min-height:100%; } header{ background: #000; text-align: center; height:50px; line-height: 50px; color:#fff; } main{ padding-bottom:100px; background:#ccc; text-align: center; } footer{ color:#fff; height:100px; line-height:100px; margin-top:-100px; text-align:center; background-color: #000; }
此方法把footer之前的元素放在一个容器里面,形成了container和footer并列的结构:
首先,设置.container的高度至少充满整个屏幕;
其次,设置main(.container最后一个子元素)的padding-bottom值大于等于footer的height值;
最后,设置footer的height值和margin-top负值
。
展示效果跟第一种是一样的,缺点跟第一种也是一样的。
方法三:footer高度任意+js
HTML代码:
<header>头部</header> <main>中间内容</main> <footer>底部信息</footer>
CSS代码:
*{ margin:0; padding:0; } html{ height:100%; } body{ min-height:100%; margin:0; padding:0; position:relative; } header{ background: #000; text-align: center; height:50px; line-height: 50px; color:#fff; } main{ /* main的padding-bottom值要等于或大于footer的height值 */ background:#ccc; text-align: center; } footer{ color:#fff; width:100%; height:100px; line-height:100px; text-align:center; background-color: #000; } /* 动态为footer添加类fixed-bottom */ .fixed-bottom { position: fixed; bottom: 0; width:100%; }
JS(jquery)代码:
$(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); var contentHeight = document.body.scrollHeight,//网页正文全文高度 winHeight = window.innerHeight;//可视窗口高度,不包括浏览器顶部工具栏 if(!(contentHeight > winHeight)){ //当网页正文高度小于可视窗口高度时,为footer添加类fixed-bottom $("footer").addClass("fixed-bottom"); } } footerPosition(); $(window).resize(footerPosition); });
常用的纯css实现footer sticker
CSS代码:
html, body, #sticker {height: 100%;} body > #sticker {height: auto; min-height: 100%;} #stickerCon {padding-bottom: 40px;} #footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}
HTML代码:
<div id="sticker"> <div id="stickerCon"></div> </div> <div id="footer">footer</div>