Align element to bottom of window - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Page

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Page

Description

Align element to bottom of window

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">
header,footer {<!-- w  w w  . j a  v a 2 s.  c  o  m-->
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   padding:21px;
   display:block;
   width:100%;
   background:Chartreuse;
   color:yellow;
}

header {
   position:fixed;
   top:0px;
   z-index:3;
}

#content {
   position:absolute;
   padding-top:61px;
   padding-bottom:61px;
   min-height:calc(100% - 61px - 71px);
}

footer {
   position:absolute;
   bottom:0px;
   z-index:3;
}
</style> 
 </head> 
 <body> 
  <header>
    Header content 
  </header> 
  <section id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie condimentum condimentum. In id interdum lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper venenatis bibendum. Suspendisse id tellus quis sapien malesuada ornare. Proin non dui vel dui placerat bibendum. Donec euismod, nisl sed vulputate fringilla, dolor arcu condimentum enim, rutrum luctus mi tortor id velit. Praesent hendrerit, odio a aliquam vestibulum, orci purus placerat mi, vel facilisis libero orci sit amet purus. Pellentesque quam sem, iaculis eu sem in, suscipit pulvinar libero. Duis vulputate sollicitudin dolor nec lobortis. Cras tempus, sapien at vestibulum semper, elit lectus viverra metus, id adipiscing mi orci a odio. Proin pulvinar et nisl vitae faucibus. Integer pretium, tortor sit amet aliquet feugiat, lacus lectus facilisis ligula, nec sollicitudin lacus quam sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas interdum massa nulla, sed iaculis augue bibendum nec. Morbi elementum aliquam nunc, vitae elementum arcu bibendum non. 
   <footer>
     Footer content footer content footer content footer content footer content 
   </footer> 
  </section>  
 </body>
</html>

Related Tutorials