HTML CSS examples for CSS Widget:Footer
Height 100% with fixed footer div
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w . ja v a 2 s .c om--> height:100%; background-color:Chartreuse; } .mframe { display:block; position:relative; width:1025px; min-height:100%; margin-left:auto; margin-right:auto; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:100; } .header { display:block; position:relative; float:left; width:1025px; height:126px; margin-top:26px; color:yellow; background-color:blue; } .navbar { display:block; position:relative; float:left; width:1025px; height:56px; margin-top:71px; font-size:17px; line-height:17px; font-weight:bold; color:pink; background-color:OrangeRed; } .content { display:block; position:relative; float:left; width:1025px; height:100%; min-height:100%; margin-left:auto; margin-right:auto; margin-bottom:0px; padding-bottom:100%; background-color:grey; font-size:21px; color:BlueViolet; } .footer { display:block; position:fixed; width:100%; height:51px; bottom:0px; left:0px; color:Chartreuse; text-align:center; background-color:yellow; } </style> </head> <body> <div class="mframe"> <div class="header"> Lorem ipsum <div class="navbar"> Lorem ip </div> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendre </div> <div class="footer"> Lorem ipsum dolor sit </div> </div> </body> </html>