Sticky Footer means that the Footer part of a web page is always at the bottom of the browser window.

Footers are pushed to the bottom of the page when the content is too long to be visible to the browser. But if the page isn’t long enough, the footer stays at the bottom of the browser window.

Global style

I’m going to write a global style, and I’m going to set the background color so that I can see it.

/* common.css */

html.body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.content-inside:nth-child(1) {
  background-color: salmon;
}

.content-inside:nth-child(2) {
  background-color: seagreen;
}

.content-inside:nth-child(3) {
  background-color: greenyellow;
}

.footer {
  background-color: royalblue;
}
Copy the code

Method 1: Set the margin-bottom value of.content to negative

<! DOCTYPEhtml>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Method 1: Set the margin-bottom value of.content to negative</title>
    <link rel="stylesheet" href="common.css">
    <style>
      .content {
        min-height: 100vh;
        margin-bottom: -50px; /* is the inverse of the height of.footer */
      }

      .content-inside {
        height: 100px; /*. The height of the content-inside can be set arbitrarily, and can be adjusted according to the content height */
        line-height: 100px; /* To center text vertically */
      }

      .push..footer {
        height: 50px; /*.push is an extra placeholder element with the same height as.footer */
        line-height: 50px; /* To center text vertically */
      }
    </style>
  </head>
  <body>
    <! -- div. Content Set margin-bottom to the height of div. Footer
    <div class="content">
      <! -- div. Content-inside height can be set arbitrarily, and can be adjusted according to the content height -->
      <div class="content-inside">Content 1</div>
      <div class="content-inside">Content 2</div>
      <div class="content-inside">Content 3</div>
      <! Div. Push is an extra placeholder element with the same height as div. Footer -->
      <div class="push"></div>
    </div>
    <! Div. Footer is always at the bottom of the page, regardless of whether the height of the page content can fill the page -->
    <div class="footer">Sticky Footer</div>
  </body>
</html>
Copy the code

Method 2: Set margin-top to negative for.footer

<! DOCTYPEhtml>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Method 2: Set margin-top to negative for.footer</title>
    <link rel="stylesheet" href="common.css">
    <style>
      .content {
        min-height: 100vh;
      }

      .content-inside {
        height: 100px; /*. The height of the content-inside can be set arbitrarily, and can be adjusted according to the content height */
        line-height: 100px; /* To center text vertically */
      }

      .footer {
        height: 50px;
        line-height: 50px; /* To center text vertically */
        margin-top: -50px; /* is the inverse of the height of.footer */
      }
    </style>
  </head>
  <body>
    <! -- div.content -->
    <div class="content">
      <! -- div. Content-inside height can be set arbitrarily, and can be adjusted according to the content height -->
      <div class="content-inside">Content 1</div>
      <div class="content-inside">Content 2</div>
      <div class="content-inside">Content 3</div>
    </div>
    <! Div. Footer is always at the bottom of the page, regardless of whether the height of the page content can fill the page -->
    <! -- div. Footer set margin-top to the height of div. Footer -->
    <div class="footer">Sticky Footer</div>
  </body>
</html>
Copy the code

Method 3: Use calc() to set the height of.content

<! DOCTYPEhtml>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Method 3: Use calc() to set the height of.content</title>
    <link rel="stylesheet" href="common.css">
    <style>
      .content {
        min-height: calc(100vh - 50px); /* Use calc() minus.footer height */
      }

      .content-inside {
        height: 100px; /*. The height of the content-inside can be set arbitrarily, and can be adjusted according to the content height */
        line-height: 100px; /* To center text vertically */
      }

      .footer {
        height: 50px;
        line-height: 50px; /* To center text vertically */
      }
    </style>
  </head>
  <body>
    <! -- div.content -->
    <div class="content">
      <! -- div. Content-inside height can be set arbitrarily, and can be adjusted according to the content height -->
      <div class="content-inside">Content 1</div>
      <div class="content-inside">Content 2</div>
      <div class="content-inside">Content 3</div>
    </div>
    <! Div. Footer is always at the bottom of the page, regardless of whether the height of the page content can fill the page -->
    <div class="footer">Sticky Footer</div>
  </body>
</html>
Copy the code

Method 4: Use Flexbox Flexible Layout (recommended)

<! DOCTYPEhtml>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Method 4: Use Flexbox Flexible Layout (recommended)</title>
    <link rel="stylesheet" href="common.css" />
    <style>
      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .content {
        flex: 1;
      }

      .content-inside {
        height: 100px; /*. The height of the content-inside can be set arbitrarily, and can be adjusted according to the content height */
        line-height: 100px; /* To center text vertically */
      }

      .footer {
        height: 50px; /* This can be done without fixing the height of the.footer
        line-height: 50px; /* To center text vertically */
      }
    </style>
  </head>
  <body>
    <! -- div.content -->
    <div class="content">
      <! -- div. Content-inside height can be set arbitrarily, and can be adjusted according to the content height -->
      <div class="content-inside">Content 1</div>
      <div class="content-inside">Content 2</div>
      <div class="content-inside">Content 3</div>
    </div>
    <! Div. Footer is always at the bottom of the page, regardless of whether the height of the page content can fill the page -->
    <div class="footer">Sticky Footer</div>
  </body>
</html>
Copy the code

Method 5: Use Grid layout

<! DOCTYPEhtml>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Method 5: Use Grid layout</title>
    <link rel="stylesheet" href="common.css" />
    <style>
      body {
        min-height: 100vh;
        display: grid;
        grid-template-rows: 1fr auto;
      }

      .content-inside {
        height: 100px; /*. The height of the content-inside can be set arbitrarily, and can be adjusted according to the content height */
        line-height: 100px; /* To center text vertically */
      }

      .footer {
        height: 50px; /* This can be done without fixing the height of the.footer
        line-height: 50px; /* To center text vertically */
        grid-row-start: 2;
        grid-row-end: 3;
      }
    </style>
  </head>
  <body>
    <! -- div.content -->
    <div class="content">
      <! -- div. Content-inside height can be set arbitrarily, and can be adjusted according to the content height -->
      <div class="content-inside">Content 1</div>
      <div class="content-inside">Content 2</div>
      <div class="content-inside">Content 3</div>
    </div>
    <! Div. Footer is always at the bottom of the page, regardless of whether the height of the page content can fill the page -->
    <div class="footer">Sticky Footer</div>
  </body>
</html>
Copy the code

To summarize

Methods 1, 2 and 3 have similar ideas. Fix the minimum height of the container to 100vh and subtract the height of div.footer in some way. The disadvantage is that you need to fix the height of div.

Method 4 is the most recommended method because you don’t need to fix the height of div.footer and compatibility is good.

Method five Grid layout compatibility is poor, many browsers can not use, just for reference.

The source code