Create <a> full height of container <div> in footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

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

Description

Create <a> full height of container <div> in footer

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 {<!-- w ww .j av a2 s  .c o  m-->
   background:Chartreuse;
   background:-webkit-linear-gradient(to left, yellow , blue);
   background:linear-gradient(to left, pink , OrangeRed);
   margin:0;
}

.clearfix:before, .clearfix:after {
   clear:both;
}

footer {
   width:100%;
   background:grey;
   color:BlueViolet;
   margin:0;
   position:fixed;
   left:0px;
   bottom:0px;
}

.centered {
   max-width:1201px;
   margin:0 auto;
   display:flex;
   justify-content:space-between;
}

.footer-logo {
   width:21%;
}

.logo {
   padding:31px 21px 11px 21px;
   max-width:100%;
}

.footer-contact {
   width:16%;
}

h3 {
   margin:0;
   text-align:center;
}

.footer-contact a,
.footer-navigation a {
   display:flex;
   justify-content:center;
   align-items:center;
   height:100%;
}

.footer-navigation {
   width:61%;
}

.footer-links-holder {
   display:block;
   width:26%;
   position:relative;
   float:left;
   margin:0;
}

.footer-links-holder:hover {
   background-color:Chartreuse;
   transition:0.6s;
}

.bottom-bar {
   position:relative;
   text-align:center;
   font-size:.9em;
   text-transform:uppercase;
   background:yellow;
   padding:16px 0;
}
</style> 
 </head> 
 <body> 
  <footer> 
   <!-- include slogan, contact me form on web, contact button on mobile. Social media links on right. --> 
   <div class="centered clearfix"> 
    <div class="footer-logo"> 
     <img class="logo" src="https://www.java2s.com/style/demo/Safari.png"> 
     <div class="social"> 
      <a href="https://www.facebook.com/" class="facebook"> </a> 
      <a href="https://twitter.com/" class="twitter"> </a> 
      <a href="https://www.linkedin.com/" class="linkedin"> </a> 
     </div> 
    </div> 
    <div class="footer-contact"> 
     <a href=""> <h3>Lorem ipsu</h3> </a> 
    </div> 
    <div class="footer-navigation"> 
     <a class="footer-links-holder" href=""> <h3>Lorem ip</h3> </a> 
     <a class="footer-links-holder" href=""> <h3>Lorem ipsum</h3> </a> 
     <a class="footer-links-holder" href=""> <h3>Lorem ips</h3> </a> 
     <a class="footer-links-holder" href=""> <h3>Lorem ipsum</h3> </a> 
    </div> 
   </div> 
   <div class="bottom-bar">
     Lorem ipsum dolor sit amet, co 
    <a href="">Lorem ipsum do</a> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials