Transparent Sticking CSS footer on 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

Transparent Sticking CSS footer on bottom

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">
html<!--   w  ww  .  j av a2  s .  c  o m-->
 {
   overflow-y:scroll;
}

body
 {
   margin:0;
   background-color:Chartreuse;
   font-family:'Ubuntu',sans-serif;
}

div
 {
   display:block;
}

.header-wrapper
 {
   -webkit-box-shadow:0 0 11px yellow;
   -moz-box-shadow:0 0 11px blue;
   box-shadow:0 0 11px pink;
}

.container
 {
   margin-right:auto;
   margin-left:auto;
   width:941px;
}

.container:before, .container:after
 {
   display:table;
   line-height:0;
   content:"";
}

#header
 {
   height:61px;
   padding:21px 0 26px 0;
}

#header .logo
 {
   float:left;
}

#header .logo a
 {
   display:block;
   width:271px;
   height:61px;
   text-indent:-1000em;
   line-height:61px;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat 0px 2px;
   background-size:271px 61px;
}

#header .american-flag
 {
   display:block;
   float:right;
}

#header .american-flag img
 {
   max-height:61px;
}

#content
 {
   height:100%;
   padding:21px 0 0 0;
}

body a
 {
   color:OrangeRed;
   text-decoration:none;
}

body a:hover
 {
   text-decoration:underline;
}

.footer-wrapper
 {
   -webkit-box-shadow:0 0 11px grey;
   -moz-box-shadow:0 0 11px BlueViolet;
   box-shadow:0 0 11px Chartreuse;
   position:fixed;
   bottom:0;
   right:0;
   left:0;
   width:100%;
}

#footer
 {
   line-height:61px;
   height:61px;
}
</style> 
 </head> 
 <body> 
  <div class="header-wrapper"> 
   <div class="container" id="header"> 
    <div class="logo"> 
     <a href="/">Lor</a> 
    </div> 
    <div class="american-flag">
      Lorem 
    </div> 
   </div> 
  </div> 
  <div class="container" id="content">
    Lorem ipsum do 
  </div> 
  <div class="footer-wrapper"> 
   <div class="container" id="footer">
     Lorem ip 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials