html - Slight issue with Adjustable Sticky footer CSS -
following piece of css code sticky footer. there 1 issue; whenever open site in maximized window, sticky footer works fine if there not content. however, when open in restored down window, footer ends in middle of page. want keep footer after content of body. if content not fill whole screen, footer should appear @ bottom , if content fills more screen, footer should appear @ bottom after content. kindly let me know how modify css resolve issue.
.footy { height: 100px; position:absolute; color: #eaeaea; background-color: #333333; bottom: 0; width: 100%; max-width:100%; margin-left: -8px; } .footin { padding-top: 45px; width:900px; margin:0 auto; } <div class="footy"> <div align="left" class="footin"> llc. 2012 rights reserved © </div> </div>
try adding min-height , position:relative main container placed footer.
edited:
<html> <head> <title>you site title</title> <style> body,html{margin:0;padding:0;} #wrapper{position:relative;min-height:700px;background-color:#ccc;} #footer{position:absolute;bottom:0;background-color:#ff4345;height:100px;width:100%;} </style> </head> <body> <div id="wrapper"> <div id="header"> <!-- header code--> </div> <div id="content"> <!--your content goes here--> </div> <div id="footer"> <!--your footer code goes here--> </div> </div> </body> </html> you can try way finish project.the idea main container should have height of whole view port , footer positions relatively container @ bottom.
Comments
Post a Comment