238

I am trying to have my footer (just a div with a line of text in it) be at the bottom of the screen if the content doesn't go all the way to the bottom, or be at the bottom of the content if the content requires scroll bars. If the content doesn't require scroll bars, it works perfectly, but when the content is too long, the footer is still in the same spot, sitting right on top of the content.

My basic div structure is:

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

My corresponding CSS (stripped down somewhat):

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}
harriyott
  • 10,505
  • 10
  • 64
  • 103
James Simpson
  • 13,488
  • 26
  • 83
  • 108
  • 2
    This question does not have a reliable answer in the link provided. The accepted answer should be the one provided by Vinicius José Latorre in this question since it is very clear and it works. – Exel Gamboa May 12 '17 at 19:27
  • maybe the problem is with the html or body tag. this link helped me : https://makandracards.com/makandra/39473-stretching-an-html-page-to-full-height – sina Jun 03 '20 at 14:30

10 Answers10

247

The simplest solution is to use min-height on the <html> tag and position the <footer> with position:absolute;

Demo: jsfiddle and SO snippet:

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

body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}

footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
}
<article>
    <!-- or <div class="container">, etc. -->
    <h1>James Dean CSS Sticky Footer</h1>
    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
<footer>
    <h1>Footer Content</h1>
</footer>
YakovL
  • 7,557
  • 12
  • 62
  • 102
Vinicius José Latorre
  • 2,661
  • 1
  • 13
  • 6
  • 6
    I also liked it- thanks. However, one question: why the "overflow: hidden;"? – daOnlyBG Jul 04 '15 at 16:00
  • 2
    This is a pretty sweet solution. Only drawback is position absolute of footer height... :/. Still I used your solution :) – simon Nov 27 '15 at 14:09
  • 1
    For future reference: this wasn't working for me at first because I had explicitly set `html { height: 100%; }`. – Niek Apr 15 '17 at 14:22
  • Overflow: hidden is needed, because on narrower viewport footer content could overflow, which will look bad, since Vinicius proposes we set a fixed height of the footer matching body bottom margin. For adaptive layouts we can do without overflow:hidden, compensating with media queries and sizing footer content appropriately instead. Or even adjusting body margin in tandem with footer height to match footer content, for that matter. – Kitet May 24 '17 at 18:24
  • 2
    This answer is nice, but it is so uncool to plagerize someone else, line for line, without even giving credit. -1 because of that. http://mystrd.at/modern-clean-css-sticky-footer/ – Greeso Jul 01 '17 at 05:31
  • 4
    setting absolute for footer is horrible since it covers other static elements on a short page. – clusterBuddy Mar 11 '18 at 05:40
  • What if my footer size varies based on display size and other factors? I can't use `margin: 0 0 100px;` in that case.. great solution otherwise. – Babken Vardanyan Mar 13 '18 at 08:00
  • @BabkenVardanyan maybe you could use some javascript to adjust the body margin, but I didn't test this idea. – Vinicius José Latorre Jun 01 '18 at 03:10
  • 1
    Other comments pointed out the disadvantages of having a fixed footer height. The modern (and arguably more elegant) way is to use flex: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ – Matthias Hagemann Jul 20 '18 at 11:56
  • By far the nicest/easiest solution around with no big CSS hassle. – Jonny Jul 23 '19 at 14:59
  • This works on big screens, but on small screens it stays in its position when I scroll down – Jesus Almaral - Hackaprende Aug 14 '19 at 03:51
  • Thanks, neik's comment made it work for me! – kerkeslager Jun 20 '22 at 00:25
  • Not bad, but the footer covers the body content. – sequence Aug 14 '22 at 09:49
27

Why not using: { position: fixed; bottom: 0 } ?

Nicolas Viennot
  • 3,921
  • 1
  • 21
  • 22
19

A simple solution that i use, works from IE8+

Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
Sanjeev
  • 2,607
  • 22
  • 16
5

Use this one. It will fix it.

#ibox_footer {
    padding-top: 3px; 
    position: absolute;
    height: 20px;
    margin-bottom: 0;
    bottom: 0;
    width: 100%;
}
AStopher
  • 4,207
  • 11
  • 50
  • 75
user2645333
  • 147
  • 2
  • 1
4

Use min-height as some pixel value, instead of %.
Like:

min-height:620px;
height:auto;

and footer as:

.footer {
    height:70px;
    clear:both;
    position:relative;
    bottom:0;
    width: 100%;
}
Pritam Banerjee
  • 17,953
  • 10
  • 93
  • 108
bishal
  • 676
  • 7
  • 12
2

do it using jQuery put inside code on the <head></head> tag

<script type="text/javascript">
$(document).ready(function() { 
    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;  
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
    }
});
</script>
YakovL
  • 7,557
  • 12
  • 62
  • 102
Vishal
  • 816
  • 11
  • 19
  • 5
    It would be hard to manage and understand quickly, neater is a pure css implementation. – landed Jan 08 '14 at 10:24
  • Not so long ago I was doing something similar, but the footer's height was being retrieved differently depending on browser, or even between page refreshes. Looked weird. Although it somewhat works, I advise against this method. I was retrieving outerHeight though. – Kitet May 24 '17 at 17:46
  • @landed the problem with a pure CSS solution is either a `fixed height` or a fixed height and `overflow hidden`. Anyone using a CMS would struggle and fixed heights in responsive days are not cool. – Eoin Jun 23 '17 at 20:26
  • 2
    @eoin I would agree with you that fixed height is not great for those reasons. But I would prefer a css only solution in a perfect world (or later CSS spec). I want to see zero style or layout created by js ideally. – landed Jun 26 '17 at 16:36
  • For sure, it's not a perfect world, but it's getting there. Even using HTML in ::after is not a viable solution (and never will be) – Eoin Jun 26 '17 at 17:38
2

This should help you.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
    height: 155px;
}
AStopher
  • 4,207
  • 11
  • 50
  • 75
Kenneth P.
  • 1,797
  • 3
  • 21
  • 31
1

the easiest hack is to set a min-height to your page container at 400px assuming your footer come at the end. you dont even have to put css for the footer or just a width:100% assuming your footer is direct child of your <body>

Nicolas Manzini
  • 8,379
  • 6
  • 63
  • 81
1

The model being shared here is very similar to Ryan Fait's StickyFooter http://ryanfait.com/sticky-footer

Just one div is missing so far in this discussion (the model proposed here by Kenneth Palanganas worked fine for local Win81 design for about 48 hours and then in ie/chrome collapsed for unknown reason). Ryan's "push" div will satisfy some reluctant browsers. Note that px is usual, however, for liquid layout consistency, em may be preferred.

* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }

<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>
user2003524
  • 13
  • 4
1

I would like to share how I solved mine using Javascript function that is called on page load. This solution positions the footer at the bottom of the screen when the height of the page content is less than the height of the screen.

function fix_layout(){
  //increase content div length by uncommenting below line
  //expandContent();
  
    var wraph = document.getElementById('wrapper').offsetHeight;
    if(wraph<window.innerHeight){ //if content is less than screenheight
        var headh   = document.getElementById('header').offsetHeight;
        var conth   = document.getElementById('content').offsetHeight;
        var footh   = document.getElementById('footer').offsetHeight;
        //var foottop = window.innerHeight - (headh + conth + footh);
        var foottop = window.innerHeight - (footh);
        $("#footer").css({top:foottop+'px'});
    }
}

function expandContent(){
  $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>'+

'<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>'+

'<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>'+

'<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>'+

'<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>');
}
/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }

#header, #content, #footer{ display: inline-block; width: 100vw; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
        <div id="wrapper">
            <div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                [some header elements here]
            </div>
            <div id="content" class="container">
              [some content elements here]
              
              
            </div>
            <div id="footer" class="footer">
                [some footer elements here]
            </div>
        </div>
    </body>

Hope that helps.

ITWitch
  • 1,729
  • 5
  • 20
  • 38