HTML CSS examples for CSS Widget:Footer
Fill DIV in between header and footer
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w ww .j a v a 2s. c o m--> margin:0; padding:0; height:100%; } header { height:100px; background-color:Chartreuse; margin:0; } footer { position:absolute; bottom:0; height:100px; background-color:yellow; width:100%; margin:0; } #content { position:absolute; overflow:auto; top:100px; bottom:100px; background-color:blue; width:100%; margin:0; } </style> </head> <body> <header> Lorem </header> <div id="content"> Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br> </div> <footer> Lorem </footer> </body> </html>