• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > footer保持在页面底部的两种方法

    footer保持在页面底部的两种方法

    作者: 分类:前端开发 点击: 262 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

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

      思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留(padding-bottom)footer的高度。

      html代码

      <div id="container">
          <header>HEADER</header>
          <section class="main">MAIN</section >
          <footer>FOOTER</footer>
      </div>

      css代码

      *{
          margin: 0;
          padding: 0;
      }
      html,body{
          height: 100%;
      }
      #container{
          /*保证footer是相对于container位置绝对定位*/
          position:relative;  
          width:100%;
          min-height:100%; 
          /*设置padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;*/  
          padding-bottom: 100px;  
          box-sizing: border-box;
      }
      header{
          width: 100%;
          height: 200px;
          background: #999;
      }
      .main{
          width: 100%;
          height: 200px;
          background: orange;
      }
      footer{
          width: 100%;
          height:100px;   /* footer的高度一定要是固定值*/ 
          position:absolute;
          bottom:0px;
          left:0px;
          background: #333;
      }

      方法二:采用 flexbox布局模型

      思路:我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, (默认是行,也就是横向布局);同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。

      css代码

      *{
          margin: 0;
          padding: 0;
      }
      html,body{
          height: 100%;
      }
      #container{
          display: flex;
          flex-direction: column;
          height: 100%;
      }
      header{
          background: #999;
          flex: 0 0 60px;
      }
      .main{
          background: orange;
          flex: 1 0 auto;
      }
      footer{
          background: #333;
          flex: 0 0 60px;
      }

      本文转载于:猿2048https://www.mk2048.com/blog/blog_hkib1b12kcb.html



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006198261.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“footer保持在页面底部的两种方法”

    1. hcl1989说道:

      嗯嗯,写的不错,结合例子很有说服力。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.