方法一:footer高度固定+绝对定位
CSS代码:
- *{
- margin:0;
- padding:0;
- }
- html{
- height:100%;
- }
- body{
- min-height:100%;
- position:relative;
- }
- header{
- background: #000;
- text-align: center;50px;
- line-height: 50px;
- color:#fff;
- }
- main{ /* main的padding-bottom值要等于或大于footer的height值 */
- padding-bottom:100px;#ccc; center;
- }
- footer{absolute;#fff;
- bottom:
- width:center;
- background-color: #000;
- }
实现的效果:
- 首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;
- 其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;
- 最后,设置footer绝对定位,并
设置height为固定高度值。
优点:footer一直存在于底部。
方法二:footer高度固定+margin负值
- div class="container">
- div
- html,body{
- .container{
- main{
- padding-bottom:
- margin-top:-100px; #000;
- }
此方法把footer之前的元素放在一个容器里面,形成了container和footer并列的结构:
首先,设置.container的高度至少充满整个屏幕;
其次,设置main(.container最后一个子元素)的padding-bottom值大于等于footer的height值;
最后,设置footer的height值和margin-top负值
。
展示效果跟第一种是一样的,缺点跟第一种也是一样的。
方法三:footer高度任意+js
- #000;
- }
- 动态为footer添加类fixed-bottom */
- .fixed-bottom { fixed; 0;100%;
- }
JS(jquery)代码:
- $(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 { auto; min-height:
- #stickerCon {padding-bottom: 40px;}
- #footer {margin-top:-40px; height: 40px; width: 100%; text-align: line-height: color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}
- id="sticker"="stickerCon"></="footer">footer>