foot 固定底部不用绝对定位

最新推荐文章于 2023-09-14 09:15:24 发布

Zoe_Wang_ing

最新推荐文章于 2023-09-14 09:15:24 发布

阅读量3.5k

点赞数

分类专栏： html css

css 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

html

76 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>footer 在底部且 不用绝对定位</title>
    <style>
    html, body, #wrap{
        height: 100%;
    }
    body > #wrap {
        height: auto;
        min-height: 100%;
        background: yellow;
    }
    #main {
        padding-bottom: 150px;  /*必须使用和footer相同高度*/
        background: blue;
    }
    #footer {
        position: relative;
        margin-top:-150px;   /*footer高度的负值*/
        height: 150px;
        clear:both;
        background: red;
    }
    .clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    </style>
  </head>
  <body>
  <div id="wrap">
      <div id="main" class="clearfix">
          <div id="content"></div>
          <div id="side"></div>
      </div>
  </div>
  <div id="footer">
  </div>
  
  </body>
</html>

from:http://paranimage.com/css-sticky-footer/