CODEWITHSUNDEEP
jquerycsshtmlfooter
Rafael Fonseca
Rafael Fonseca

Reputation: 269

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

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;

Upvotes: 24

Views: 105886

Answers (10)

Aditya Ajay
Aditya Ajay

Reputation: 1

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 :)

Upvotes: 0

agarcian
agarcian

Reputation: 3965

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>

Upvotes: 29

Nikita 웃
Nikita 웃

Reputation: 2060

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.

Upvotes: 19

javaJavaJava
javaJavaJava

Reputation: 374

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.

Upvotes: 0

orenl
orenl

Reputation: 91

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>

Upvotes: 9

HenryW
HenryW

Reputation: 3761

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.

Upvotes: 36

Ali Haider
Ali Haider

Reputation: 517

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

Upvotes: 4

Chamika Sandamal
Chamika Sandamal

Reputation: 24312

#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/

Upvotes: 3

Maheep
Maheep

Reputation: 5605

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

Upvotes: 0

Geoffrey
Geoffrey

Reputation: 11354

Not sure if this is what your looking for:

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

Upvotes: 1

Related Questions