Position footer at bottom of page having fixed header

by

As you have mentioned, position: fixed would position the footer with the respect to the viewport rather than the page itself. Therefore, we have to keep the element in normal flow and somehow position it to the bottom of the page.

There are couple of approaches to achieve that, which have been discussed in the wild during the time.
For instance:

Sticky Footer

In this answer I’d go with Ryan Fait’s method since it is simple and easy to understand and also it meets your needs (Situations where both header and footer have fixed heights).

Considering the structure below:

<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>

The following steps are needed:

  1. Setting height of the <html> and <body> elements to 100% which is required for the next step1.

  2. The most important thing we need to do is to make sure that the #content is high enough to push the #footer down the page. Hence we give the #content a min-height of 100%.

  3. So far, the #content has taken 100% of height of the viewport, thus we should pull the footer up to position it at the bottom of the page. In order to do that we could give the #content a negative margin-bottom equivalent to the footer’s height. Also to make sure that the footer appears on top of the content, we should position the footer relatively. Demo Here.

  4. As can be seen, when the #content grows by its contents, some of the contents go behind the footer. We could avoid that either by appending a spacer element at the end of #content or use the combination of padding-bottom and box-sizing: border-box2 which is supposed to be supported on IE8 as well.

4.1 Adding a spacer

Example Here

<div id="content">
    <!-- content goes here -->
    <div class="spacer"></div>
</div>
<div id="footer">Footer</div>

.spacer, #footer { height: 100px; }

4.2 Combination of padding-bottom and box-sizing

Updated Example

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

(Note that vendor prefixes omitted due to brevity)

Adding the Header

  1. If the header should remain in normal flow, you could simply add it to the #content as follows:
    (Example Here)

    <div id="content">
    <div id="header">Header</div>
    ...

  2. But if it should be positioned absolutely3, we need to push the contents of #content element down in order to prevent overlapping.

Therefore, again, we could either add a spacer at the beginning of #content (Example Here):

<div id="header">Header</div>
<div id="content">
    <div class="header-spacer"></div> 
    <!-- content goes here -->
    <div class="footer-spacer"></div> 
</div>
<div id="footer">Footer</div>

Or use the combination of padding-top and box-sizing as follows:

<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */

    padding-top   : 50px;  /* Equivalent to header's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

Updated Example (Note that vendor prefixes omitted due to brevity)

At last but not least!

Nowadays, All major modern web browsers support box-sizing: border-box declaration (including IE8). However if you’re looking for the traditional way which has a wider browser support, stick with using spacer elements.

1. This is needed to make min-height: 100% to work on the #content element (because a percentage value is relative to the height of the box’s containing block which is established by the <body>). Also <html> should have an explicit height to make height: 100% to work on <body>.

2. box-sizing: border-box makes UAs calculate the width/height of the box including padding and borders.

3. According to spec, absolutely positioned elements are elements having a position of absolute or fixed.

More Related Contents:

  1. Bootstrap 4 – Sticky footer – Dynamic footer height
  2. My Footer Floats
  3. A true sticky footer with a fixed header?
  4. Grid or Table? for Text and an Image on the bottom right (4/4) [duplicate]
  5. Make headings (h1, h2, …) inherit style from body
  6. Center image using text-align center?
  7. Does UL have default margin or padding [duplicate]
  8. How can I “disable” zoom on a mobile web page?
  9. Make a div fill the height of the remaining screen space
  10. Shape with a slanted side (responsive)
  11. CSS content property: is it possible to insert HTML instead of Text?
  12. Change bullets color of an HTML list without using span
  13. ie9 border radius
  14. Setting transform-origin on SVG group not working in Firefox
  15. text-overflow: ellipsis not working
  16. Scale image to fit a bounding box
  17. Pure css Chessboard with div & no classes or ids, is it possible?
  18. How to change the size of the radio button using CSS?
  19. How to include all css kept in a directory?
  20. Making an svg image object clickable with onclick, avoiding absolute positioning
  21. Insert HTML from CSS
  22. How to show an animation that is hidden behind a colored div using a “reveal” div on the surface
  23. CSS custom cursor doesn’t work in FF/Chrome
  24. Which elements support the ::before and ::after pseudo-elements?
  25. CSS: display:block; vs display:table;
  26. pseudo-element acting like a grid item in CSS grid
  27. How can I select elements in CSS by partial ID value?
  28. CSS background image on top of
  29. The difference between HTML media queries and CSS media queries
  30. How can I remove the border around an image without a source?

Leave a Comment