HTML CSS examples for CSS Widget:Footer stick to bottom
CSS aside height 100% when using sticky footer
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!-- w w w. j a v a2 s .c o m--> box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; } body { color:Chartreuse; font-family:'Century Gothic', 'Arial', Helvetica, Sans-Serif; padding-top:41px; padding-bottom:41px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; } header { background-color:yellow; height:41px; width:100%; position:absolute; top:0px; } footer { background-color:blue; height:41px; width:100%; position:fixed; bottom:0px; } aside { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; overflow:auto; color:pink; } </style> </head> <body> <header> Lorem ipsum dol </header> <aside> Lorem ipsum dolor sit amet, consectetur adipiscing el <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br> </aside> <footer> Lorem ipsum dol </footer> </body> </html>