Your Ad Here

advanced code snippet search

Posted By

cesarkohl on 09/13/11


Tagged

css html footer height 100 bottom


Versions (?)

Perfect footer at bottom on 100% height page

 / Published in: HTML
 

Alternate between the #centro { height } to validate the perfection of this code.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title></title>
  6. 	<style type="text/css" media="screen">
  7. 		* { margin: 0; padding: 0; }
  8. 		html, body { height: 100%; }
  9. 		#limites { position: relative; margin: 0 auto; height: auto !important; min-height: 100%; width: 960px; background: #999; }
  10. 		#centro { background: #666; height: 100px; /*height: 1000px;*/ }
  11. 		#footer { background: red; height: 100px; position: absolute; bottom: 0; width: 100%; }
  12. 	</style>
  13. </head>
  14. <body>
  15. 	<div id="limites">
  16. 		<div id="centro">
  17.  
  18. 		</div>
  19. 		<div id="footer">Footer</div>
  20. 	</div>
  21. </body>
  22. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: mortu on September 13, 2011

Cull piece of code

You need to login to post a comment.