HTML CSS examples for CSS Widget:Footer stick to bottom
Create a full height container with a sticky footer layout
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body, html { height:100%; margin:0; padding:0; } header {<!-- www . j a v a 2s. c om--> width:100%; height:51px; border:0; background:lightblue; } .wrap { margin:0 auto; position:relative; width:401px; min-height:100%; background:lightblue; box-shadow:inset 0 0 0 2px ; } .content { color:Chartreuse; border:2px solid yellow; } footer { margin:-51px auto 0 auto; height:51px; position:relative; background:darkred; color:blue; width:399px; } </style> </head> <body> <div class="wrap"> <header> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> </header> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipi </div> </div> <footer> Lorem ipsum dolor s </footer> </body> </html>