By Bill the Lizard


2008-09-03 18:51:17 8 Comments

I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.

Update:

It's not working properly in Firefox. I'm seeing a strip of background color below the footer when there's not enough content on the page to push the footer all the way down to the bottom of the browser window. Unfortunately, this is the default state of the page.

24 comments

@antelove 2018-12-25 03:17:50

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }
  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

@VXp 2018-09-21 09:27:52

Since the Grid solution hasn't been presented yet, here it is, with just two declarations for the parent element, if we take the height: 100% and margin: 0 for granted:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

@Roger 2018-08-30 23:46:32

The flex solutions worked for me as far as making the footer sticky, but unfortunately changing the body to use flex layout made some of our page layouts change, and not for the better. What finally worked for me was:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

I got this from ctf0's response at https://css-tricks.com/couple-takes-sticky-footer/

@Sophivorus 2012-02-18 23:36:29

Here is a solution with jQuery that works like a charm. It checks if the height of the window is greater than the height of the body. If it is, then it changes the margin-top of the footer to compensate. Tested in Firefox, Chrome, Safari and Opera.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

If your footer already has a margin-top (of 50 pixels, for example) you will need to change the last part for:

css( 'margin-top', height_diff + 50 )

@Hai Phan 2018-12-14 21:33:51

One alternative is to add a "pusher" div right before the footer. Then set the height of the pusher div. This avoids having to deal with existing margin-top

@DevWL 2016-01-16 03:14:16

jQuery CROSS BROWSER CUSTOM PLUGIN - $.footerBottom()

Or use jQuery like I do, and set your footer height to auto or to fix, whatever you like, it will work anyway. this plugin uses jQuery selectors so to make it work, you will have to include the jQuery library to your file.

Here is how you run the plugin. Import jQuery, copy the code of this custom jQuery plugin and import it after importing jQuery! It is very simple and basic, but important.

When you do it, all you have to do is run this code:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

there is no need to place it inside the document ready event. It will run well as it is. It will recalculate the position of your footer when the page is loaded and when the window get resized.

Here is the code of the plugin which you do not have to understand. Just know how to implement it. It does the job for you. However, if you like to know how it works, just look through the code. I left comments for you.

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

@Ravinder Payal 2017-03-04 18:31:36

Vanilla java-script is less lengthy than plugin.

@gcedo 2015-12-08 01:23:17

Sticky footer with display: flex

Solution inspired by Philip Walton's sticky footer.

Explanation

This solution is valid only for:

  • Chrome ≥ 21.0
  • Firefox ≥ 20.0
  • Internet Explorer ≥ 10
  • Safari ≥ 6.1

It is based on the flex display, leveraging the flex-grow property, which allows an element to grow in either height or width (when the flow-direction is set to either column or row respectively), to occupy the extra space in the container.

We are going to leverage also the vh unit, where 1vh is defined as:

1/100th of the height of the viewport

Therefore a height of 100vh it's a concise way to tell an element to span the full viewport's height.

This is how you would structure your web page:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

In order to have the footer stick to the bottom of the page, you want the space between the body and the footer to grow as much as it takes to push the footer at the bottom of the page.

Therefore our layout becomes:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Implementation

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

You can play with it at the JSFiddle.

Safari quirks

Be aware that Safari has a flawed implementation of the flex-shrink property, which allows items to shrink more than the minimum height that would be required to display the content. To fix this issue you will have to set the flex-shrink property explicitly to 0 to the .content and the footer in the above example:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

@fstanis 2016-08-21 00:19:40

I feel this is the correct answer, since it's actually the only approach which works even when the height of the footer is not known.

@Sonu Mishra 2017-08-14 07:04:55

I request the OP to accept this as the answer. This is the only non-hacky and general solution. Due to other answers being severely high voted, users often overlook this answer and later regret -- first-hand experience. :)

@Halfacht 2018-03-16 12:13:08

This messes up the grid with Neat 2

@YakovL 2018-04-19 23:04:08

But why not the Philip Walton's solution itself, why an extra "spacer" element?

@YakovL 2018-04-19 23:13:08

@Staale 2008-09-03 18:55:18

To get a sticky footer:

  1. Have a <div> with class="wrapper" for your content.

  2. Right before the closing </div> of the wrapper place the <div class="push"></div>.

  3. Right after the closing </div> of the wrapper place the <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

@jlp 2010-02-28 12:59:58

It does not work in asp.net with <form> tag

@dazbradbury 2012-03-09 13:21:53

@jlp: You need to add the form tag to the height:100% statement, else it will break the sticky footer. Like this: html, body, form {height: 100%;}

@nicooga 2012-10-20 07:13:37

I noticed that adding padding to the footer screws it, but figured out that that can be fixed by subtracting the extra padding on the footer from the {footer, push} height.

@mohitp 2013-03-22 09:15:51

The detailed explanation with the demo is provided in this site: CSS Sticky Footer

@Syk 2015-12-30 15:03:40

Hey I followed your steps and it works pretty well for big pages. But on small pages where the user is not able to scroll down the footer is a little to far at the bottom. So it makes a nearly empty page scrollable. Anyone knows how to fix this? You can see my test page here sheltered-escarpment-6887.herokuapp.com

@Nathan Reed 2016-09-27 16:07:21

BTW, instead of adding a .push div, you can also use .wrapper::after to accomplish the same thing.

@ACK_stoverflow 2016-11-16 06:14:54

@Syk I've found that reducing the min-height helps. 94% is an ok value, but you still see the issue on mobile :( Not sure there's a real solution here.

@Steve Waring 2017-06-24 07:52:06

If your footer is just text, it might be better to set the height in em's, eg for one line of text height: 1.5em Then users that set magnification will still be able to see the text.

@Temani Afif 2017-12-04 19:47:49

A similar solution to @gcedo but without the need of adding an intermediate content in order to push the footer down. We can simply add margin-top:auto to the footer and it will be pushed to the bottom of the page regardless his height or the height of the content above.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

@YakovL 2018-04-22 21:36:00

Another approach would be to give .content flex: 1 0 auto; to make it growable and non-shinkable, but margin-top: auto; is a nice trick that involves styling footer, not "non-related" .content which is nice. Actually, I wonder why flex is needed in this approach..

@Temani Afif 2018-04-22 21:39:01

@YakovL yes the main idea here is the margin-top trick ;) I know that I can make the content like this but it will be almost the same as a previous answer where the idea is to push the footer by the content ... and here I wanted to avoid this and push the footer only with margin;)

@Temani Afif 2018-04-22 21:41:28

@YakovL flex is needed for the margin:auto :) we cannot use it without it ... as margin:auto behave slightly different with flex item then block items. If you remove display:flex it won't work, you will have a normal block element flow

@YakovL 2018-04-22 21:53:52

Yeah, I can see that it won't work without it, but I don't understand why (what's "slightly different")

@Temani Afif 2018-04-22 21:59:11

@YakovL it's simple, using normal block element the flow is always a row direction so only margin right/left used with auto will work (like the famous margin:0 auto to center block element) BUT we don't have any column direction so there is no margin auto with top/bottom. Flexbox has both row/column direction ;). This is the slight difference, but margin is also used within flexbox to align element so even within a row direction you can use margin-top/bottom auto to align vertically .. You can read more here : w3.org/TR/css-flexbox-1/#auto-margins

@juan Isaza 2017-11-25 18:34:59

For me the nicest way of displaying it (the footer) is sticking to the bottom but not covering content all the time:

#my_footer {
    position: static
    fixed; bottom: 0
}

@stealththeninja 2018-11-18 18:54:41

Is this syntax correct? Is position supposed to be static or fixed?

@Daniel Alsaker 2017-07-10 21:16:05

I have myself struggled with this sometimes and I always found that the solution with all those div's within each other was a messy solution. I just messed around with it a bit, and I personally found out that this works and it certainly is one of the simplest ways:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

What I like about this is that no extra HTML needs to be applied. You can simply add this CSS and then write your HTML as whenever

@Victor.Uduak 2018-02-22 02:26:28

This worked me, however i added width:100% to the footer.

@Reggie Pinkham 2017-06-27 02:18:37

Flexbox solution

Flex layout is preferred for natural header and footer heights. This flex solution is tested in modern browsers and actually works :) in IE11.

See JS Fiddle.

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

@Laughing Horse 2017-06-21 17:09:38

I wasn't having any luck with the solutions suggested on this page before but then finally, this little trick worked. I'll include it as another possible solution.

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

@jjr2000 2016-02-10 09:04:23

For this question many of the answers I have seen are clunky, hard to implement and inefficient so I thought I'd take a shot at it and come up with my own solution which is just a tiny bit of css and html

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

this works by setting the height of the footer and then using css calc to work out the minimum height the page can be with the footer still at the bottom, hope this helps some people :)

@Paul Sweatte 2012-08-26 12:47:14

Use absolute positioning and z-index to create a sticky footer div at any resolution using the following steps:

  • Create a footer div with position: absolute; bottom: 0; and the desired height
  • Set the padding of the footer to add whitespace between the content bottom and the window bottom
  • Create a container div that wraps the body content with position: relative; min-height: 100%;
  • Add bottom padding to the main content div that is equal to the height plus padding of the footer
  • Set the z-index of the footer greater than the container div if the footer is clipped

Here is an example:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

@Ravinder Payal 2016-09-12 11:43:02

I have created a very simple library https://github.com/ravinderpayal/FooterJS

It is very simple in use. After including library, just call this line of code.

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Footers can be dynamically changed by recalling above function with different parameter/id.

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Note:- You haven't to alter or add any CSS. Library is dynamic which implies that even if screen is resized after loading page it will reset the position of footer. I have created this library, because CSS solves the problem for a while but when size of display changes significantly,from desktop to tablet or vice versa, they either overlap the content or they no longer remains sticky.

Another solution is CSS Media Queries, but you have to manually write different CSS styles for different size of screens while this library does its work automatically and is supported by all basic JavaScript supporting browser.

Edit CSS solution:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

Now, if the height of display is more than your content length, we will make footer fixed to bottom and if not, it will automatically appear in very end of display as you need to scroll to view this.

And, it seems a better solution than JavaScript/library one.

@user1235285 2016-08-29 06:08:49

An old thread I know, but if you are looking for a responsive solution, this jQuery addition will help:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Full guide can be found here: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

@Jimmy 2008-09-03 19:02:31

You could use position: absolute following to put the footer at the bottom of the page, but then make sure your 2 columns have the appropriate margin-bottom so that they never get occluded by the footer.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

@isomorphismes 2012-03-15 06:44:27

I've tried this with my similar setup (two columns + footer) and it does not work.

@Jimmy 2012-03-15 17:18:04

in what way does it not work?

@Satya Prakash 2013-10-17 15:03:49

It overlap with content if content grow.

@Jimmy 2013-10-17 18:06:36

that's why content has the margin-bottom. you have to set it to whatever fixed height you make the footer.

@user1404801 2016-01-17 17:37:18

This works very well with HTML 5

@Jonathan 2016-03-09 09:31:41

For what it's worth, if something is a zero value it does not matter what measuring unit it is in, nothing is nothing, so all the 0pxs in all the stylesheets I've seen should be just 0.

@Ravinder Payal 2016-09-12 11:46:16

what if height of page is more than the display's height or content length of footer is dynamic? View my answer for solution of this problem.

@Kyle Zimmer 2015-07-21 00:55:32

Multiple people have put the answer to this simple problem up here, but I have one thing to add, considering how frustrated I was until I figured out what I was doing wrong.

As mentioned the most straightforward way to do this is like so..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

However the property not mentioned in posts, presumably because it is usually default, is the position: static on the body tag. Position relative will not work!

My wordpress theme had overridden the default body display and it confused me for an obnoxiously long time.

@Ajith 2014-12-21 06:23:14

CSS :

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

This should do the trick if you are looking for a responsive footer aligned at the bottom of the page,which always keeps a top-margin of 80% of the viewport height.

@Danield 2014-09-28 22:02:33

Use CSS vh units!

Probably the most obvious and non-hacky way to go about a sticky footer would be to make use of the new css viewport units.

Take for example the following simple markup:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

If the header is say 80px high and the footer is 40px high, then we can make our sticky footer with one single rule on the content div:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

Which means: let the height of the content div be at least 100% of the viewport height minus the combined heights of the header and footer.

That's it.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

... and here's how the same code works with lots of content in the content div:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

NB:

1) The height of the header and footer must be known

2) Old versions of IE (IE8-) and Android (4.4-) don't support viewport units. (caniuse)

3) Once upon a time webkit had a problem with viewport units within a calc rule. This has indeed been fixed (see here) so there's no problem there. However if you're looking to avoid using calc for some reason you can get around that using negative margins and padding with box-sizing -

Like so:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

@themarketka 2014-12-05 20:16:08

This is pretty much the best solution I’ve seen here, worked even in my strange case with some contents of the .content overflowing into the footer for who-knows-what-reason. And I guess that with sth like Sass and variables, it could be ever more flexible.

@Aramir 2015-07-03 23:06:41

Indeed, this one works like a charm. Easy to fallback for a non-supporting browsers too.

@Jonathan 2016-03-09 09:33:25

How is messing with absolute measurements not still hacky? At best it's perhaps less hacky

@Fernanda Brum Lousada 2017-04-27 02:36:38

But and if the height of footer and header is mensured in percent and not px? Like 15% of the page's height?

@Evgeny 2017-04-28 15:33:23

Viewport units don't always work as expected on mobile browsers that hide or show address bar depending on scroll position

@Pirate of Marmara 2018-01-12 14:31:27

min-height: calc(100vh - 120px); worked for me.

@Raleigh Buckner 2008-09-03 19:01:58

Set the CSS for the #footer to:

position: absolute;
bottom: 0;

You will then need to add a padding or margin to the bottom of your #sidebar and #content to match the height of #footer or when they overlap, the #footer will cover them.

Also, if I remember correctly, IE6 has a problem with the bottom: 0 CSS. You might have to use a JS solution for IE6 (if you care about IE6 that is).

@Seichi 2015-03-09 20:49:19

when the window is too small, the footer shows up in front of the content with this css.

@obecalp 2011-02-28 04:35:38

None of these pure css solutions work properly with dynamically resizing content (at least on firefox and Safari) e.g., if you have a background set on the container div, the page and then resize (adding a few rows) table inside the div, the table can stick out of the bottom of the styled area, i.e., you can have half the table in white on black theme and half the table complete white because both the font-color and background color is white. It's basically unfixable with themeroller pages.

Nested div multi-column layout is an ugly hack and the 100% min-height body/container div for sticking footer is an uglier hack.

The only none-script solution that works on all the browsers I've tried: a much simpler/shorter table with thead (for header)/tfoot (for footer)/tbody (td's for any number of columns) and 100% height. But this have perceived semantic and SEO disadvantages (tfoot must appear before tbody. ARIA roles may help decent search engines though).

@Grey Panther 2008-09-03 18:55:54

One solution would be to set the min-height for the boxes. Unfortunately it seems that it's not well supported by IE (surprise).

@John Sheehan 2008-09-03 18:55:48

Try putting a container div (with overflow:auto) around the content and sidebar.

If that doesn't work, do you have any screenshots or example links where the footer isn't displayed properly?

Related Questions

Sponsored Content

64 Answered Questions

[SOLVED] How do you disable browser Autocomplete on web form field / input tag?

22 Answered Questions

[SOLVED] Make body have 100% of the browser height

  • 2011-07-11 18:50:56
  • bodyofheat
  • 751390 View
  • 715 Score
  • 22 Answer
  • Tags:   html css height

10 Answered Questions

16 Answered Questions

[SOLVED] HTML5 best practices; section/header/aside/article elements

18 Answered Questions

[SOLVED] How do I modify the URL without reloading the page?

22 Answered Questions

10 Answered Questions

[SOLVED] Make footer stick to bottom of page correctly

  • 2010-08-09 19:46:31
  • James Simpson
  • 423860 View
  • 188 Score
  • 10 Answer
  • Tags:   html css

18 Answered Questions

[SOLVED] How do I force a DIV block to extend to the bottom of a page even if it has no content?

  • 2008-09-29 04:40:24
  • Vince Panuccio
  • 312708 View
  • 170 Score
  • 18 Answer
  • Tags:   css html border

24 Answered Questions

[SOLVED] How to align content of a div to the bottom?

2 Answered Questions

[SOLVED] Get Footer to stay at the bottom of the page

  • 2013-01-09 01:36:09
  • Ryan Fitzgerald
  • 4148 View
  • -1 Score
  • 2 Answer
  • Tags:   html css footer

Sponsored Content