How to avoid an unknown height sticky footer to overlap content with CSS only?

Question

I want an HTML element (a footer for example) to be absolutely positioned to the bottom of a page but at the same time I don't want it to overlap the content when the viewport is small (vertically resize the browser to see the issue). I want the footer to stay after the content when the viewport is small to avoid overlapping. Is there any CSS-only solution for that?

Here's a fiddle showing the issue: http://jsfiddle.net/nunoarruda/owfz5eby/

<div>Content</div>
<footer>footer with absolute position</footer>

footer {
    width: 400px;
    background-color: #ccc;
    position: absolute;
    bottom: 0;
}

Google's homepage has this implemented but I'm unable to understand if it is a CSS-only method or it requires JavaScript. Here's a screenshot of Google's footer with position: absolute; enter image description here

And here's a screenshot of Google's footer staying after the content and not overlapping: enter image description here

Any help appreciated. Thanks in advance!

Feel free to check this out - http://stackoverflow.com/a/30428672/483779 that I posted before, very similar situation. You can change both 60px to 200px in the fiddle, and resize the output frame and see. — Stickers, May 26 '15 at 22:52
@sdcr good solution but it requires a fixed height on the footer and that same amount as a margin-bottom on the body. The site I want to implement this has a responsive footer that changes height (height: auto;) according to the viewport. If I don't find a better solution I might use this technique with media queries to update the height — nunoarruda, May 26 '15 at 23:55
I'll think about it for the dynamic height, how about JS? that could make it really easy. — Stickers, May 27 '15 at 00:01
@sdcr I know how to do it with JS, I'm really trying to find a CSS-only solution. Thanks! — nunoarruda, May 27 '15 at 00:03

Stickers · Accepted Answer · 2015-06-02T14:09:47.520

4

Here is the flex solution. Browser support: IE 10+

JsFiddle Demo

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
main {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: silver;
    /* height: 200px; */
}

<main>main</main>
<footer>footer</footer>

And the CSS table solution. Browser support: IE 8+

JsFiddle Demo

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
.main, .footer {
    display: table-row;
}
.main {
    height: 100%;
}
.footer {
    background: silver;
    /* height: 200px; */
}

<div class="main">main</div>
<div class="footer">footer</div>

edited Jun 02 '15 at 14:09

answered May 27 '15 at 00:23

Stickers

75,527
23
147
186

Toggle `height: 200px;` for testing the scrollbar in the jsfiddle. – Stickers May 27 '15 at 00:25
The current global browser support for flexbox and viewport units might steer me away from using this but yeah it is the perfect solution :) Thanks! – nunoarruda May 27 '15 at 00:38
@NunoArruda I've added another solution that also works on older browsers. – Stickers May 27 '15 at 16:57
none of these examples work for me (FF 102.8.0esr). am I trippin – Patrick Michaelsen Mar 15 '23 at 09:39

score 3 · Answer 2 · answered May 26 '15 at 23:12

3

Try this out.

HTML

<div class="container">
    <h1>heading</h1>
    <p>My amazing content.</p>
</div>
<footer class="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</footer>

CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin: 0 0 60px 0;
    padding: 0;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}
.container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
    margin: 20px 0;
}

JSFiddle

answered May 26 '15 at 23:12

Jordan

1,101
1
12
26

same as @sdcr solution but thanks for the effort! – nunoarruda May 27 '15 at 00:04
@NunoArruda Not exactly, my solution doesn't require the `flex` property and having to use the `vh` unit. `flex` isn't supported for IE 9 or less so just depends on your needs. – Jordan May 27 '15 at 10:00
1

I was referring to his first solution he put on the comments of the question :) – nunoarruda May 27 '15 at 13:25
Just found out that Bootstrap has an example of this method :) http://getbootstrap.com/examples/sticky-footer/ – nunoarruda May 29 '15 at 17:46
Yeah it's a common method, just search 'sticky footer' on google, there are quite a few. :) – Jordan May 29 '15 at 18:58

Ivan Durst · Answer 3 · 2015-08-22T01:05:29.653

2

Building off of Pangloss' answer, you can use margin-top: auto on the footer; that way you don't need the main element CSS to push the footer down:

JSfiddle

CSS:

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
footer {
  background: silver;
  margin-top: auto;
}

HTML:

<main>main, or any other el here</main>
<footer>footer</footer>

edited Aug 22 '15 at 01:05

answered Aug 22 '15 at 01:00

Ivan Durst

1,163
2
12
24

This is by far the easiest way to implement the sticky footer concept. However, one thing I'd like to know. While putting a para in the footer using this concept, the para sticks vertically to the top of the footer. How do I place it in the middle? I'm trying to use "vertical-align: middle;" but it's taking no effect. Please help. – priyamtheone Jul 03 '20 at 12:57
1

@priyamtheone add `display: flex;` `justify-content: center;` and `flex-direction: column;` to the `footer` element. Updated fiddle: http://jsfiddle.net/cedm8u0q/ – Ivan Durst Jul 04 '20 at 15:23
Works great, except in Safari. – priyamtheone Jul 06 '20 at 10:38
does everyone on the planet have a different idea of what a sticky footer is or there just something wrong with my machine because none of these are rendering sticky footers for me – Patrick Michaelsen Mar 15 '23 at 09:43

score 0 · Answer 4 · answered May 27 '15 at 08:27

To give you another option, you could do it by using calc to give the content a height of 100% less the footer's height and then also give it a min-height to suit your needs - no need for any positioning.

(View the Snippet in fullscreen and resize your browser to see it in action)

*{box-sizing:border-box;margin:0;}
html,body{height:100%;}
main{
  background:#000;
  height:calc(100% - 50px);
  min-height:300px;
}
footer{
  background:#ccc;
  height:50px;
}

<main></main>
<footer></footer>

score -1 · Answer 5 · edited May 27 '15 at 00:25

Give the footer a z-index.
Give the content position:relative, a higher z-index, and a background-color (so that when the footer travels behind it, it's no longer visible).

You can also give content a min-height or padding-bottom if you want the footer to disappear a little before it would otherwise collide with the content.

 .content {    
     position:relative;
     z-index:2;
     background:#FFF;
 }

 footer {
     width: 400px;
     background-color: #ccc;
     position: absolute;
     bottom: 0;
     z-index:1;
 }

I updated your fiddle to show you what I mean. When the footer collides with the content, it will slide underneath it. http://jsfiddle.net/owfz5eby/1/

Thanks for the effort but I want to keep the footer visible after the content and not hide it behind the content. Check the Google's homepage to see what I mean. — nunoarruda, May 26 '15 at 23:10

How to avoid an unknown height sticky footer to overlap content with CSS only?

5 Answers5