【读】CSS五种方式实现Footer置底

first

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .content {
      padding: 20px;
      min-height: 100%;
      margin: 0 auto -50px;
    }
    .footer,
    .push {
      height: 50px;
    }



      * {
        box-sizing: border-box;
      }
      body {
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 20px 0 0 0;
      }
      footer {
        background: #42A5F5;
        line-height: 50px;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Sticky Footer with Negative Margin 1</h1>
      <p><button id="add">Add Content</button></p>
      <div class="push">

      </div>
    </div>
    <footer class="footer">
      footer
    </footer>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $("#add").on("click", function() {
        $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").insertBefore(".push");
        });
    </script>
  </body>
</html>

second

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .content {
      min-height: 100%;
    }
    .content-inside {
      padding: 20px;
      padding-top: 50px;
    }
    .footer {
      height: 50px;
      margin-top: -50px;
    }



      * {
        box-sizing: border-box;
      }
      body {
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 20px 0 0 0;
      }
      footer {
        background: #42A5F5;
        line-height: 50px;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-inside">
        Sticky Footer with Negative Margin 2
        <p><button id="add">Add content</button></p>
      </div>
      
    </div>
    <footer class="footer"></footer>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $("#add").on("click", function() {
        $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content-inside");
        });
    </script>
  </body>
</html>

thrid

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .content {
      min-height: -moz-calc(100vh - 70px);
      min-height: -webkit-calc(100vh - 70px);
      min-height: calc(100vh -70px);
      padding: 40px 40px 0 40px;
    }
    .footer {
      height: 50px;
    }



      * {
        box-sizing: border-box;
      }
      body {
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 20px 0 0 0;
      }
      footer {
        background: #42A5F5;
        line-height: 50px;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Sticky footer with calc()</h1>
      <p>
        <button id="add"> Add content</button>
      </p>
    </div>
    <footer class="footer"></footer>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $("#add").on("click", function() {
        $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
        });
    </script>
  </body>
</html>

fourth

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    .content {
      flex: 1;
      padding: 20px;
    }
    .footer {
      padding: 20px;
    }



      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 0 0 20px 0;
      }
      footer {
        background: #42A5F5;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Sticky footer with Flexbox</h1>
      <p>
        <button id="add"> Add content</button>
      </p>
    </div>
    <footer class="footer"></footer>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $("#add").on("click", function() {
        $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
        });
    </script>
  </body>
</html>

fifth

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
      display: grid;
      grid-template-rows: 1fr auto;
    }
    .content {
      padding: 20px;
    }
    .footer {
      grid-row-start: 2;
      grid-row-end: 3;
    }



      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 0 0 20px 0;
      }
      footer {
        background: #42A5F5;
        color: white;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Sticky footer with Flexbox</h1>
      <p>
        <button id="add"> Add content</button>
      </p>
    </div>
    <footer class="footer">footer</footer>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $("#add").on("click", function() {
        $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
        });
    </script>
  </body>
</html>

原文

推荐阅读更多精彩内容

  • 页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超...
    pypypy阅读 116评论 0 0
  • 第一部分Common Lisp介绍第1章 介绍一下Lisp你在学的时候觉得已经明白了,写的时候更加确信了解了,教别...
    AllenChyou阅读 1,284评论 5 8
  • 英语数词 基本内容 基数词的表示法 1.以下是最基本的基数词,学习者必须牢记:one(1), two(2), th...
    小绿植物阅读 72评论 0 1
  • 第一封 外面风大 跟我回家 The first one out of the big wind came home...
    YoonA鹿先生阅读 427评论 0 0
  • 稀土的思考: 股价的上涨首先变现为股价的变硬,然后是检测量能的变化。 首先,稀土的股价并不硬,硬-必须要连续上涨。...
    皓月饮孤狼阅读 20评论 0 0