小青苔基地php2022-11-06

HTML中footer固定在页面底部的若干种方法

 <div class="header"><div class="main"></div></div>
 <div class="container"><div class="main"></div></div>
 <div class="footer"><div class="main"></div></div>

如果主体内容过短不足以支撑浏览器时，footer会上移，非常影响页面，算是一个大bug了，搜过很多种方法现整理一下footer固定在第的若干种方法，供以后参考。（欢迎大家积极补充。）

以上布局为给个人写页面常用。

注：.main{

width:1050px;

margin:0 auto;

height:auto;

}

1、这是刚刚使用过的css,可以达到效果，只是不论浏览器的大小如何footer均会在底，主体内容则以滚动条形式显示。

缺点：小分辨率下达不到好的视觉体验，主体以滚动条显示，不合格

.footer{

position:fixed;

bottom:0;

left:0;

}

2、

目前用的是这种，经试验可以满足需要

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>footer需要固定在底部</title>
         <style type="text/css">
             html,body{font-size: 14px;font-family: "微软雅黑";text-align: center;width: 100%;height: 100%;min-height: 100%;border:0;line-height: none;}
             p{border: 0;margin: 0;padding: 0;line-height: none;}
             body{padding:0px; margin:0px ;}
             .container{position:relative;height: auto;min-height: 100%;margin: 0}
             .container .header{height: 100px;background: #0000FF;}
             .container .push{padding-bottom: 100px;}
             .footer{position:relative;height: 100px;margin-top:-100px;background: #0000FF;}

         </style>
     </head>
     <body>
         <div class="container">
             <div class="header">
                 <p>头部文本</p>
             </div>
             <div class="content">
                 <p>主体内容</p>
             </div>
             <div class="push"></div><!--push在此为footer占位，高度和footer的一样-->
         </div>
         <div class="footer">
             <p>底部文本</p>
         </div>

     </body>
 </html>

1.本站默认解压密码为：xiaoqingtai.com
2.本站所有内容均由互联网收集整理，仅供大家参考、学习，禁止商用。
3.本站所有内容版权归原著所有，如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注