fix footer at the bottom of screen - 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

fix footer at the bottom of screen

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">
.footer {<!--  w  ww .j a v  a  2  s .  com-->
   background-color:Chartreuse;
   text-align:center;
   height:31px;
   margin-top:11%;
   bottom:0px;
   position:fixed
}

.footer p {
   color:yellow;
   line-height:26px;
   font-size:14.3334px;
   font-family:Arial;
}

.footer a {
   color:blue;
   text-decoration:none;
   font-size:14.3334px;
   line-height:normal;
   padding-right:0.6%;
}

.footer a:hover {
   color:pink;
   font-size:96%;
}
</style> 
 </head> 
 <body> 
  <div class="footer"> 
   <p> <a href="../info/about.php">Lorem </a> <a href="../info/help.php">Lorem</a> <a href="../info/terms.php">Lorem </a> <a href="../info/privacy.php">Lorem ip</a> <a href="../info/advertise.php">Lorem ips</a> <a>Lor</a>Lorem ipsum do</p> 
  </div>  
 </body>
</html>

Related Tutorials