Place footer at bottom of page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer aligned bottom

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer aligned bottom

Description

Place footer at bottom of page

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from www.j  a v a 2  s.com-->
   background:Chartreuse;
   font:17px "Lucida Grande", Arial, sans-serif;
}

#mobile-type-title {
   color:yellow;
   text-align:center;
}

#mobile-region {
   width:321px;
   height:569px;
   background:blue;
   margin:21px auto;
   overflow:scroll;
}

#mobile-display-region {
   padding:17px;
   position:relative;
   min-height:Calc(100% - 33px);
   background:pink;
}

#main-content {
   min-height:401px;
   margin-bottom:51px;
}

#mobile-display-region footer {
   font:13px "Lucida Grande", Arial, sans-serif;
   position:absolute;
   bottom:11px;
}

#mobile-display-region footer:before,
#mobile-display-region footer:after {
   content:"";
   display:table;
}

#mobile-display-region footer:after {
   clear:both;
}

a {
   color:OrangeRed;
}
</style> 
 </head> 
 <body> 
  <h2 id="mobile-type-title">Lorem ips</h2> 
  <div id="mobile-region"> 
   <div id="mobile-display-region"> 
    <div id="main-content">
      Lorem ipsum dolor sit amet, consectetur adip 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br>Lorem ipsum dolor sit amet, consectetur adip 
    </div> 
    <footer>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorp 
     <nav> 
      <a>Lorem ipsum dolo</a>Lor 
      <a>Lorem ipsum do</a> 
     </nav> 
    </footer> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials