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
Post a Comment