footer固定在页面底部的实现方法总结

前端之家收集整理的这篇文章主要介绍了footer固定在页面底部的实现方法总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

方法一:footer高度固定+绝对定位

HTML代码

  1. <body>
  2. header>头部</main>中间内容footer>底部信息>
  3. >

CSS代码

  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. html{
  6. height:100%;
  7. }
  8. body{
  9. min-height:100%;
  10. position:relative;
  11. }
  12. header{
  13. background: #000;
  14. text-align: center;50px;
  15. line-height: 50px;
  16. color:#fff;
  17. }
  18. main{ /* main的padding-bottom值要等于或大于footer的height值 */
  19. padding-bottom:100px;#ccc; center;
  20. }
  21. footer{absolute;#fff;
  22. bottom:
  23. width:center;
  24. background-color: #000;
  25. }

实现的效果

  • 首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;
  • 其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;
  • 最后,设置footer绝对定位,并设置height为固定高度值。

优点:footer一直存在于底部

缺点:中间区域main如果内容不够,不能撑满页面的中间区域。

 方法二:footer高度固定+margin负值

HTML代码

  1. div class="container">
  2. div
  3. html,body{
  4. .container{
  5. main{
  6. padding-bottom:
  7. margin-top:-100px; #000;
  8. }

方法把footer之前的元素放在一个容器里面,形成了container和footer并列的结构:
首先,设置.container的高度至少充满整个屏幕;
其次,设置main(.container最后一个子元素)的padding-bottom值大于等于footer的height值;
最后,设置footer的height值和margin-top负值

展示效果跟第一种是一样的,缺点跟第一种也是一样的。

方法三:footer高度任意+js

HTML代码

  1. #000;
  2. }
  3. 动态为footer添加fixed-bottom */
  4. .fixed-bottom { fixed; 0;100%;
  5. }

JS(jquery)代码

  1. $(function(){
  2. footerPosition(){
  3. $("footer").removeClass("fixed-bottom");
  4. var contentHeight = document.body.scrollHeight,//网页正文全文高度
  5. winHeight = window.innerHeight;可视窗口高度,不包括浏览器顶部工具栏
  6. if(!(contentHeight > winHeight)){
  7. 当网页正文高度小于可视窗口高度时,为footer添加fixed-bottom
  8. $("footer").addClass("fixed-bottom");
  9. }
  10. }
  11. footerPosition();
  12. $(window).resize(footerPosition);
  13. });

常用的纯css实现footer sticker

CSS代码

  1. html,body,#sticker {height: 100%;}
  2. body > #sticker { auto; min-height:
  3. #stickerCon {padding-bottom: 40px;}
  4. #footer {margin-top:-40px; height: 40px; width: 100%; text-align: line-height: color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}

HTML代码

  1. id="sticker"="stickerCon"></="footer">footer>

 

猜你在找的HTML相关文章