Footer with variable height at bottom of page

Question

I'm using this approach to keeping the footer at the bottom: https://codepen.io/cbracco/pen/zekgx

body {
  position: relative;
  padding-bottom: 6rem;
  min-height: 100%;
}


.footer {
  position: absolute;
  bottom: 0;
}

The issue is that we have a few different footer versions depending on the page, and they have different heights.

As a result, on some pages there is too much dead space between the bottom of the main content and the footer.

We could potentially change the bottom padding of the body depending on the page but given the structure of our site this wouldn't be easy to implement and it doesn't seem like a very elegant fix.

You mean by say checking the height of the footer upon page load and adjusting the bottom padding of the body? We like to avoid JS for styling, but I could see this as a possibility. — Ben Davidow, Aug 12 '16 at 00:37

score 2 · Answer 1 · edited May 23 '17 at 12:14

There a several CSS methods to pin your footer to the bottom of the container.

One modern technique uses flexbox. With flex properties you can:

improve your layout and alignment options
get rid of absolute positioning
not worry about the footer overlapping any content

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  display: flex;                  /* establish flex container */
  flex-direction: column;         /* align child elements ("flex items") vertically */
  justify-content: space-between; /* pin both flex items to opposite ends */
  margin: 0;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

.footer {    
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

NOTE: With justify-content: space-between, two elements (like in the question) can be pinned to opposite edges of the flex container. If there were more than two elements, auto margins should be used instead (more details).

Revised Codepen

Browser Support

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

This looks like a good fix, but unfortunately we do need support for early IE. I should have mentioned that — Ben Davidow, Aug 12 '16 at 00:53
@BenDavidow, here's a polyfill that may be useful to you: https://github.com/jonathantneal/flexibility — Michael Benjamin, Aug 12 '16 at 00:54

Footer with variable height at bottom of page

1 Answers1