make CSS Grid last row to take up remaining space - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

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

Description

make CSS Grid last row to take up remaining space

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 {
   height:100%;
}

.fill-height {
   height:100%;
   display:flex;
   flex-direction:column;
}

.fill-height>div {
   border:2px solid Chartreuse;
   min-height:3em;
   flex-shrink:2;<!-- w  w  w.  j ava2s .  com-->
}

.fill-height>div:last-child {
   flex-grow:2;
}
</style> 
 </head> 
 <body> 
  <section class="fill-height"> 
   <div>
     Lorem ipsum dolo 
   </div> 
   <div>
     Lorem ipsum dolo 
   </div> 
   <div>
     Lorem ipsum do 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials