HTML CSS examples for CSS Widget:Footer stick to bottom
Sticky footer with comment box
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #navigation {<!--from ww w. j a v a2s .c om--> position:fixed; top:0; width:100%; color:Chartreuse; height:11%; text-align:center; padding-top:16px; -webkit-box-shadow:0px 0px 9px 0px yellow; -moz-box-shadow:0px 0px 9px 0px blue; box-shadow:0px 0px 9px 0px pink; background-color:OrangeRed; color:grey; } #navigation a { font-size:41px; padding-left:16px; padding-right:16px; color:BlueViolet; text-decoration:none; } #content { width:601px; padding-top:71px; padding-bottom:31px; margin-left:auto; margin-right:auto; } #content img { padding-top:21px; padding-bottom:31px; } #navigation { height:100%; } .sticky-footer { background:Chartreuse; width:100%; height:100px; position:absolute; bottom:0; text-align:left; padding:11px; } .someMessages { background:yellow; position:relative; width:51%; height:100px; margin-bottom:11px; border-radius:7px; } .sender { left:51%; } </style> </head> <body> <div id="navigation"> <a href="#">Lore</a> <div class="someMessages"> </div> <div class="someMessages sender"> </div> <div class="someMessages"> </div> <div class="sticky-footer"> Lorem ipsum dolor sit a </div> </div> </body> </html>