【读】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阅读 742评论 0 50
  • 第一部分Common Lisp介绍第1章 介绍一下Lisp你在学的时候觉得已经明白了,写的时候更加确信了解了,教别...
    geoeee阅读 3,013评论 5 8
  • 英语数词 基本内容 基数词的表示法 1.以下是最基本的基数词,学习者必须牢记:one(1), two(2), th...
    小绿植物阅读 1,540评论 0 1
  • 第一封 外面风大 跟我回家 The first one out of the big wind came home...
    YoonA鹿先生阅读 998评论 0 0
  • 稀土的思考: 股价的上涨首先变现为股价的变硬,然后是检测量能的变化。 首先,稀土的股价并不硬,硬-必须要连续上涨。...
    天涯别院阅读 178评论 0 0