Using flex layout to host div height:100% - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Height

Description

Using flex layout to host div height:100%

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">
.container, html, body {
   height:100%
}

.categoryrow {<!--from  w  w  w  . jav  a2s.  c o  m-->
   display:flex;
   height:100%;
}

.categoryblock {
   margin-bottom:11px;
   width:100%;
   height:100%;
}

.category {
   border-radius:6px;
   border:2px solid Chartreuse;
   height:100%;
   padding:3px;
   position:relative;
}

.morelink {
   font-style:italic;
   float:right;
   bottom:0;
   right:0;
   position:absolute;
   margin-right:21px;
}
</style> 
 </head> 
 <body> 
  <div class="container body-content"> 
   <div class="row categoryrow"> 
    <div class="col-md-6 categoryblock"> 
     <div class="category"> 
      <div>
        test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
      </div> 
      <span class="morelink"> <a href="/Category/Health">More..</a> </span> 
     </div> 
    </div> 
    <div class="col-md-6 categoryblock"> 
     <div class="category"> 
      <div>
        Sensex, Nifty slightly up in early trade 
      </div> 
      <span class="morelink"> <a href="/Category/Business">More..</a> </span> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials