HTML CSS examples for CSS Widget:Footer
Create 3 vertical div with middle one takes space left by footer and header, middle div would show scrollbar when overflow
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- ww w .j a va2 s .c om--> margin:0; padding:0 } html, body { margin:0; padding:0; border:2px; vertical-align:top; font-size:15px; color:Chartreuse; height:100%; background:yellow; } #container { width:100%; padding-bottom:76px; } #wrap { min-height:100%; } #header { height:100px; width:100%; background:blue; } #content { width:100%; height:100px; overflow:auto; } #footer { position:relative; margin-top:-76px; clear:both; height:76px; width:100%; background:green; } </style> </head> <body> <div id="wrap"> <div id="container"> <div id="header"> header </div> <div id="content"> data <br> data <br> data <br> data <br> data <br> data <br> data <br> data <br> data <br> data <br> </div> </div> </div> <div id="footer"> footer </div> </body> </html>