Footer at the bottom of the screen without position - 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

Footer at the bottom of the screen without position

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
* {<!-- ww  w  . ja  va 2  s. c  om-->
   margin:0;
}

html, body {
   height:100%;
}

.page-wrap {
   min-height:100%;
   margin-bottom:-143px;
}

.page-wrap:after {
   content:"";
   display:block;
}

.site-footer, .page-wrap:after {
   height:143px;
}

.site-footer {
   background:orange;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="page-wrap">
    Lorem ipsu 
  </div> 
  <footer class="site-footer">
    Lorem ipsum dolor sit am 
  </footer>  
 </body>
</html>

Related Tutorials