HTML CSS examples for CSS Widget:Footer
Disable bounce for header and footer
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from w ww . j a va2 s . com--> overflow:hidden; height:100%; } body { box-sizing:border-box; overflow:hidden; height:100%; } header,footer { overflow:hidden; } .ScrollableWrapper { overflow:scroll; -webkit-overflow-scrolling:touch; } header { background-color:Chartreuse; color:yellow; text-align:center; padding-top:0px; margin:0px; position:fixed; z-index:1001; top:0px; left:0px; width:100%; max-height:46px !important; height:46px !important; line-height:46px; } .ScrollableWrapper { top:46px; left:0; right:0; bottom:0; position:absolute; margin-bottom:16px; } #foooter { position:fixed; bottom:0px; z-index:2; overflow:auto; background-color:blue; width:100%; height:16px; } body { margin:0px; padding:0px; } </style> </head> <body> <header id="header"> <span>Lorem ipsum </span> </header> <div class="ScrollableWrapper"> <span>Lorem ips<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lore<br>Lor<br>Lorem ipsum dolo</span> </div> <div id="foooter"> <span>Lorem ips</span> </div> </body> </html>