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



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

how maintain footer div @ bottom of window when have page dynamically set height (get info database, example) css?

if want jquery, came , works fine:

set css of footer:

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

set script:

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

this script must @ end of code;

i believe looking sticky footer

try this: http://ryanfait.com/sticky-footer/

from article above:

layout.css:

* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* bottom margin negative value of footer's height */ } .footer, .push { height: 142px; /* .push must same height .footer */ } /* sticky footer 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>

jquery css html footer

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -