HTML CSS examples for CSS Widget:Footer
Limit scrollbars to content area with static header/footer
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html, body { height:100%; } body {<!--from w ww.j ava 2 s . c o m--> margin:0; padding:0; background-color:Chartreuse; } .wrapper { width:1025px; height:inherit; } .container { margin:0 auto; height:inherit; } header { height:61px; background:red; } #content { margin:0 auto; padding:0; height:calc(100% - 121px); background-color:yellow; overflow:auto; } footer { height:61px; background:red; } </style> </head> <body> <div class="wrapper"> <div class="container"> <header></header> <div id="content"> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem</p> <p>Lorem ips</p> </div> <footer></footer> </div> </div> </body> </html>