HTML CSS examples for CSS Widget:Footer
Content goes underneath a fixed footer
<html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <style type="text/css"> body {<!-- w w w. j a v a 2s .c om--> background:green; } .Background { text-align:right; } .Footer { position:fixed; bottom:0; left:0px; height:31px; width:100%; background:orange; } .Sheet { position:absolute; top:201px; left:26px; width:51%; background:red; } .Sheet::after { position:absolute; content:""; bottom:-81px; height:81px; width:2px; } </style> </head> <body> <div class="Background"> Lorem ipsum <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>Lorem ipsum </div> <div class="Sheet"> Lorem ipsum dol <br> <br> <br> <br> <br> <br> <br> <br> <br>Lorem ipsum dol <br>Lorem ipsum dol <br> <br> <br> <br> <br> <br> <br> <br> <br>Lorem ipsum dol <br>Lorem ipsum dol <br> <br> <br> <br> <br> <br> <br> <br> <br>Lorem ipsum dol <br>Lorem ipsum dol <br> <br> <br> <br> <br> <br> <br> <br> <br>Lorem ipsum dol </div> <div class="Footer"> Lorem ip </div> </body> </html>