The original:
www.zcfy.cc/article/491

A brief history, if you will.

The purpose of gluing the footer is to “prop up” it at the bottom of the browser window. But not always at the bottom. If there is enough content to spread the page out, the footer can be pushed to the bottom of the page. However, if the content of the page is short, the sticky footer will still appear at the bottom of the browser window.

Use negative margin-bottom on wrapper

Use an element to wrap everything except the footer. Give it a negative margin-bottom so that it is exactly the height of the footer. This is the most basic method (example).

Example: Stick footer with negative margin

<body>
  <div class="wrapper">

      content

    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>
Copy the code
html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}
Copy the code

This method requires adding an extra element (.push element) to the content area to ensure that you don’t overwrite any actual content because a negative margin elevates the footer. The.push element should also not have its own margin-bottom. If it does, it should also count in a negative margin, which would make the height of the push element look different from the margin-bottom of the.wrapper element and look bad.

Use negative margin-top on footer

You don’t need a push element with this technique, but instead you need to wrap an extra layer of elements around the content to make it produce the padding-bottom. This is also to prevent negative margins from causing the footer to overwrite any actual content.

Example: Stick footer 2 with a negative margin

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>
Copy the code
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}
Copy the code

The downside of this technique, like the previous one, is that they both require additional HTML elements.

Reduce wrapper height by calc()

One way to do this without adding additional elements is to adjust the wrapper height via calc(). This does not require any additional elements, just two elements side by side sharing 100% height.

Example: Sticky Footer with calc();

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
Copy the code
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}
Copy the code

Notice that I subtracted 70px from calc() and set footer to 50px. This assumes that the last element in the content has a 20px margin-bottom. The height of the margin-bottom and footer are added together and deducted from the viewport height. Also, we use the ViewPort unit here, which is another trick because if we use 100% for the wrapper height, we have to set the body height to 100%.

Using flexbox

The big problem with the above three techniques is that they require a fixed footer height. Fixed heights are generally bad in Web design. Content is subject to change. We need flexibility. Fixed heights are usually red lighted. Not only do you use Flexbox to bond footers without any extra elements, but you can also support variable footer heights.

Example: Stick Footer with Flexbox

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
Copy the code
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
Copy the code

You can even add a header before.content or more. The tips for using flexbox are:

  • Set up theflex: 1On the child element that you want to automatically fill the window space (in our case, it is.contentElements).
  • Or, you can set itmargin-top:autoTo keep the child element as far away from the element in front of it as possible (or whichever direction you want). (the aboveflex:1You can also usemargin-bottom:auto, the content is vertically centered can be usedmargin:auto 0Flex layout is amazing.

Remember we have a complete guide to everything flexbox-related.

Using the grid

Grid layout is a newer technology (currently supported by fewer browsers than Flexbox). We also have a complete guide on it. It’s also pretty easy to stick footers together.

Example: Attach a Grid to a footer

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
Copy the code
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}
Copy the code

This example only works on Chrome Canary or Firefox development and may be demoted to the older Grid layout version on Edge.

英文原文 :
Css-tricks.com/couple-take…