5 ways to press footer to the bottom of the page

27 11 2021

5 ways to press footer to the bottom of the page

The purpose of the footer is that it sticks to the bottom of the browser window. If there is enough content on the page to move it, so be it. But if the content on the page is short, then the footer will hang in the middle of the screen.

We will show 5 ways how you can press the footer to the bottom of the page on a clean css

1. Negative margin for wrapper

Let's create two adjacent wrapper and footer blocks. For the wrapper, set the lower minus indent equal to the height of the footer.

HTML

<body>
  <div class="wrapper">

      content

    <div class="push"></div>
	  </div>
	  <footer class="footer"></footer>
</body>

CSS

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;
}

This requires an additional element inside the wraper ("push") to ensure that the negative margin does not pull the footer and does not close any content.

This method did not require the use of a push element, but instead required an additional wrapping element around the content to which the appropriate indentation should be applied. Again, to avoid a negative field, raise the footer over any content

HTML

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

3. Set calc () for content

One way to avoid unnecessary elements is to adjust the height of the wrapper with calc (). Then there will be no overlap, just two elements stacked on top of each other for a total height of 100%.

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

Note the 70px in calc () and the fixed footer height of 50px. Assume that the last element in the content has a margin-bottom of 20 pixels. It is this lower margin plus the height of the footer that must be folded together to subtract the viewing area from the height. Yes, we use relative units here as another little trick to avoid having to set 100% body height before you can set 100% content height.

4. Using flexbox

The big problem with the above three methods is that they require a fixed height footer. Fixed heights are usually a moveton in web design. Content may change. Things are flexible. Fixed heights are usually the territory of the red flag. Using a flexbox for the footer footer not only does not require additional elements, but also allows you to use a footer of variable height.

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

You can even add a title above or below.

5. Using the Grid

Grid markup is even newer (and less widely supported) than flexbox. You can also easily use it to stick the footer to the bottom of the page.

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

But the downside of the grid is that not all browsers support it properly

This should work in the latest versions of Chrome or Firefox and probably in the newer version of Edge.

Поширити

Напишіть свій коментар

Ваша електронна адреса не буде опублікована. Обов’язкові поля позначені *