Get footer color all the way to the bottom - 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

Get footer color all the way to the bottom

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ips</title> 
  <style>
footer {<!--from w  ww.ja v  a2s  . c o  m-->
   overflow:auto;
   clear:both;
   background:Chartreuse;
   padding-bottom:0;
}

footer h1 {
   float:left;
   text-align:center;
   width:21%;
   padding-top:6px;
   margin:6px;
   color:yellow;
}

footer article {
   width:11%;
   border:none;
   display:inline-block;
   float:right;
   box-shadow:none;
}

footer a {
   text-decoration:none;
   color:blue;
}

footer ul {
   list-style:none;
   text-align:left;
   font-size:13px;
   padding-left:0;
}

#cpyrt {
   clear:both;
   color:pink;
   box-sizing:border-box;
   width:100%;
   margin-left:0;
   margin-right:0;
   border-top:2px solid OrangeRed;
}

#cpyrt ul {
   display:inline-block;
   font-size:15px;
   padding:6px;
}
</style> 
 </head> 
 <body translate="no"> 
  <footer> 
   <h1>Lorem ips<br>Lorem i</h1> 
   <article> 
    <h6>Lorem ipsum</h6> 
   </article> 
   <article> 
    <h6>Lorem i</h6> 
    <ul> 
     <li> <a href="#">Lor</a> </li> 
     <li> <a href="#">Lorem ipsu</a> </li> 
    </ul> 
   </article> 
   <article> 
    <h6>Lorem ips</h6> 
    <ul> 
     <li> <a href="#">Lorem ip</a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
    </ul> 
   </article> 
   <article id="cpyrt"> 
    <p>Lorem ipsum dolor sit amet, consectetur ad</p> 
    <ul> 
     <li> <a href="#">Lorem ipsum dolo</a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
    </ul> 
   </article> 
  </footer>  
 </body>
</html>

Related Tutorials