Auto fit height of parent container with display table - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Height

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

Description

Auto fit height of parent container with display table

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, body {
   margin:0;
}

#category {<!-- w  w w .java2 s .  c o  m-->
   padding:11px;
   background:Chartreuse;
}

.row {
   position:relative;
   float:left;
   width:34.3334%
}

.item {
   position:absolute;
   background:yellow;
   top:11px;
   right:11px;
   left:11px;
   bottom:11px;
   text-align:center;
}

.item div {
   display:table;
   width:100%;
   height:100%;
}

.item span {
   display:table-cell;
   vertical-align:middle;
}

.height {
   margin-top:100%;
}

.clear {
   clear:both;
}
</style> 
 </head> 
 <body> 
  <div id="category"> 
   <div class="row"> 
    <div class="item"> 
     <div> 
      <span>TEST 1</span> 
     </div> 
    </div> 
    <div class="height"></div> 
   </div> 
   <div class="row"> 
    <div class="item"> 
     <div> 
      <span>TEST 2</span> 
     </div> 
    </div> 
    <div class="height"></div> 
   </div> 
   <div class="row"> 
    <div class="item"> 
     <div> 
      <span>TEST 3</span> 
     </div> 
    </div> 
    <div class="height"></div> 
   </div> 
   <div class="clear"></div> 
  </div>  
 </body>
</html>

Related Tutorials