sticky footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

小豆芽菜

最新推荐文章于 2023-02-13 20:45:00 发布

阅读量219

点赞数 1

分类专栏：随笔记-css

本文链接：https://blog.csdn.net/life0310/article/details/81411577

版权

随笔记-css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

很有意思的布局方式，很实用，总有需求遇到说footer固定在页面下方，内容过长时跟着向下推送。
而sticky footer布局就是解决这个问题。这个名词很有意思，想自己记一下，就像是黏在底部的footer，自己想象着玩的哈

html

<body>
     <!-- 注意点： wrap和footer是平级的,并且wrap要加clearfix清除浮动 -->
     <div class="wrap clearfix">
         <!-- 注意点： content的padding-bottom和footer的高度一样高 -->
         <div class="content">
             <p>我是内容</p>
         </div>
     </div>
     <!-- 注意点： footer的margin-top的高度是footer的高度取负值 -->
     <footer>我是底部</footer>
 </body>

css

<style type="text/css">
     body,html {
         height: 100%;
     }
     * {
         margin: 0;
         padding: 0;
     }
     .wrap {
         min-height: 100%;
     }
     .clearfix {
         display: inline-block;
         zoom: 1;
     }
     .clearfix:after {
         content: '';
         display: block;
         height: 0px;
         clear: both;
         visibility: hidden;
     }
     .content {
         padding-bottom: 80px;
     }
     footer {
         position: relative; 
         clear: both;
         height: 80px;
         margin-top: -80px; /* footer高度的负值 */
         background: deeppink;
     }
 </style>

第二种方法

使用flex布局，这个使用起来代码量少，但是可能有兼容性，使用时应有取舍。

html

<div class="box">
    <!-- 注意点： wrap和footer是平级的 -->
    <div class="wrap clearfix">
        <!-- 注意点： content的padding-bottom和footer的高度一样高 -->
        <div class="content">
            <p>我是内容</p>
        </div>
    </div>
    <!-- 注意点： footer的margin-top的高度是footer的高度取负值 -->
    <footer>我是底部</footer>
</div>

css

.box {
      height: 100%;
      display: flex;
      flex-direction: column;
  }
  .wrap {
      flex: 1;
  }
  footer {
      height: 60px;  /* 或者flex：0 */
  }

小豆芽菜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sticky footer布局

很有意思的布局方式，很实用，总有需求遇到说footer固定在页面下方，内容过长时跟着向下推送。而sticky footer布局就是解决这个问题。这个名词很有意思，想自己记一下，就像是黏在底部的footer，自己想象着玩的哈html&lt;body&gt; &lt;!-- 注意点： wrap和footer是平级的,并且wrap要加clearfix清除浮动 --&gt; ...
复制链接

扫一扫