html - 100% wide Footer, outside main wrap, must extend to bottom of page -
there lots of info footer 100% wide or extend 100% bottom of browser.
my problem little different.
all content of site wrapped in max-width container. client wants footer 100% wide , if page info short, footer must stretch bottom of page.
so have put footer outside main container can go right across width of page. means can't use the
html , body {height:100%;}
option because making footer 100% high not outside main container.
so, ignoring main container, how tell standalone 100% wide footer fill page bottom of browser if page short fill screen top bottom? how footer fill gap on bottom?
here simple copy of code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>untitled document</title> <style> #main { height: 100px; max-width: 900px; background-color: blue; margin: auto; } footer { width: 100%; background-color: lightblue; color: white; } </style> </head> <body> <div id="main"> </div> <footer> footer content </footer> </body> </html>
how lightblue footer go way bottom?
and please note don't want footer stick bottom, need extend bottom of browser ever on bottom of page.
//css // footer { width: 100%; background-color: lightblue; position:absolute; color: white; bottom:0; } // jquery // $(function () { var mainht = $('#main').height(); $('footer').css('top', mainht); });
Comments
Post a Comment