HTML CSS examples for CSS Widget:Footer aligned bottom
Place footer to bottom for short content
<html> <head> <title>Lorem ipsum dolor sit amet, consectetur </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html,<!--from ww w . ja v a2 s. c om--> body { height:100%; } .content { height:calc(100vh - 151px); height:-o-calc(100vh - 151px); height:-webkit-calc(100vh - 151px); height:-moz-calc(100vh - 151px); } .content { background-color:Chartreuse; width:100%; min-height:501px; background-position:center; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; -o-background-size:cover; } .footer { background-color:yellow; height:151px; } </style> </head> <body> <div class="body-content"> <section class="content"> <div class="container "> <div class="row "> Lorem ipsum dolor s </div> </div> </section> <section class="footer"> <div class="container"> <div class="row "> <div class="col-md-12"> Lorem ipsum d </div> </div> </div> </section> </div> </body> </html>