Set HTML table to always have 100% height - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Height

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Height

Description

Set HTML table to always have 100% height

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
body, html {
   height:100%;
}

* {<!--from w ww  .  ja  v a  2  s.  co m-->
   margin:0;
   padding:0;
}

.header {
   margin:0;
   background:darkgreen;
   height:11%;
}

.registration {
   background:deeppink;
   width:21%;
   overflow:auto;
   height:81%;
   float:left;
}

.main {
   display:inline-block;
}

.footer {
   background:blue;
   height:11%;
   position:fixed;
   width:100%;
   bottom:0;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="header"> 
   <h1>Lorem ipsum do</h1> 
  </div> 
  <div class="registration">
    Lorem ipsum dolor sit 
  </div> 
  <div class="main">
    Lorem ipsum do 
  </div> 
  <div class="footer">
    Lorem ip 
  </div>  
 </body>
</html>

Related Tutorials