How to keep footer at the bottom even with dynamic height website

Asked 11/1, 2012 at 7:42 Answered 26/5, 2022 at 19:27

How do I keep a footer div always at the bottom of the window when I have a page that dynamically set the height (get info from database, for example) with CSS?

If you want to do with jQuery, i came up with this and works fine:

Set the CSS of your footer:

#footer { position:absolute; width:100%; height:100px; }

Set the script:

<script>
  x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
  y = $(window).height();    
  if (x+100<=y){ // 100 is the height of your footer
    $('#footer').css('top', y-100+'px');// again 100 is the height of your footer
    $('#footer').css('display', 'block');
  }else{
    $('#footer').css('top', x+'px');
    $('#footer').css('display', 'block');
  }
</script>

This script must be at the end of your code;

Fassold answered 11/1, 2012 at 7:42 Comment(1)

CHECK THIS FLEXBOX SOLVE. This is a killer site that could be of use when the alignment of element layout. Happy Coding =) – Liquidambar 31/5, 2022 at 3:44

I believe you are looking for a Sticky Footer

Try this: https://web.archive.org/web/20161117191810/http://ryanfait.com/sticky-footer/ (archive)

From the article above:

layout.css:

* {
    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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

The html page:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Colum answered 11/1, 2012 at 7:44 Comment(0)

I think this will solve all your problems:

    <script>

  $(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>

You need at least an element with a `#footer`

When not want the scrollbar if content would fit to screen just change the value of 10 to 0 The scrollbar will show up if content not fits to screen.

Load answered 7/1, 2014 at 12:7 Comment(2)

var docHeight = $(document).height(); will work for always keeping the footer underneath the page content – Diffuser 8/4, 2017 at 15:12

I would suggest to use $('#footer').outerHeight(); instead of .height() – Bubble 21/1, 2018 at 12:3

I believe you are looking for a Sticky Footer

Try this: https://web.archive.org/web/20161117191810/http://ryanfait.com/sticky-footer/ (archive)

From the article above:

layout.css:

* {
    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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

The html page:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Colum answered 11/1, 2012 at 7:44 Comment(0)

My favorite jQuery/CSS solution for a sticky footer (non-fixed) is this:

CSS:

html {
    position: relative;
    min-height: 100%;
}
footer {
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
}

jQuery:

function footerAlign() {
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);
}


$(document).ready(function(){
  footerAlign();
});

$( window ).resize(function() {
  footerAlign();
});

DEMO: http://codepen.io/anon/pen/ZQxQoR

Note: your footer must start with <footer> and end with </footer> to use this code as is, or you can modify the code to match your footer's id/class.

Jewelfish answered 25/1, 2016 at 17:48 Comment(3)

Best solution for me! +1 – Puett 20/5, 2018 at 20:32

This is fantastic, thank you so much, I spent 6+ HOURS wasting my time with a CSS only solution - sometimes a bit of jQuery is needed! – Tomasine 28/5, 2018 at 15:24

Perfect for a non-fixed but sticky footer! – Supervisor 10/6, 2020 at 20:38

Hereby a simple solution

CSS:

.footer_wrapper {  width:100%;     background-color:#646464; }
.footer_wrapper.fixed {position:fixed; bottom:0px;}

JS:

if ($(".Page").height()<$(window).height()){
        $(".footer_wrapper").addClass("fixed");
    }else{
        $(".footer_wrapper").removeClass("fixed");
    }

HTML:

<div class="Page"> 

        /* PAGE CONTENT */

        <div class="footer_wrapper" >

            /* FOOTER CONTENT */

        </div>
    </div>

Yocum answered 26/3, 2015 at 7:28 Comment(0)

Use the following to make a fixed footer on your web-page:

CSS:

body, html
{
    margin: 0px; padding: 0px;
}

#footer
{
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /*text-align, background-color, and other specific styles can be applied here. You can change the height from 30px to anything which suits your needs. You can even comment Left: 0px & Right: 0px, but to make sure that it works in all browsers, lets leave them there.*/
}

HTML:

/*Place this div anywhere on the page, inside the form tags.*/
<div id="footer">
/*Your text/elements goes here*/
</div>

Hope this helps!

Cheers,

Veno

Liquidate answered 11/1, 2012 at 8:6 Comment(0)

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

see the working sample,

http://jsfiddle.net/RC3YX/

Certes answered 11/1, 2012 at 7:53 Comment(3)

The footer covers the bottom text of the page. :( – Pharmacist 26/11, 2012 at 20:29

If you wrap the content in a tag and set the margin-bottom value to the same as the footer-height, you would be able to read the text that the footer was originally covering. – Pharmacist 26/11, 2012 at 21:2

easiest and best solution i saw thus far. – Undertaker 9/12, 2012 at 1:56

Not sure if this is what your looking for:

<div style="position: fixed; bottom: 0px; left: 0px; right: 0px;">footer</div>

Biolysis answered 11/1, 2012 at 7:44 Comment(0)

See these two articles. http://ryanfait.com/sticky-footer/ and http://css-tricks.com/snippets/css/fixed-footer/

Eiland answered 11/1, 2012 at 7:45 Comment(0)

I was checking this question to find the same answer. This was asked sometime back and maybe this is a new feature added by jQuery. But this is a simple fix that exists now:

Just add data-position="fixed" to the div tag if you are using jQuery.

http://demos.jquerymobile.com/1.2.0/docs/toolbars/bars-fixed.html

<div data-role="footer" data-position="fixed">
        <h5>footer - page 3</h5>
        </div><!-- /footer -->

Hope this helps.

Monorail answered 2/10, 2015 at 16:50 Comment(0)

If you are trying to always keep footer visible, but sticky when page is scrolled, you can try this :

below is the css code along with html code for illustration

.footer {
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #FFE3A9;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="footer">
    <p>Made with ❤️ by Aditya Ajay</p>
  </div>

This is my first answer on stack overflow! I hope this helps :)

Risible answered 26/5, 2022 at 19:27 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

You need at least an element with a #footer

Recommended topics

Hot tags

You need at least an element with a `#footer`