Make flexbox fill remaining window height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

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

Description

Make flexbox fill remaining window height

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Simon FREMAUX</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
* {<!--from w ww.  j  a  v  a 2s. c o  m-->
   box-sizing:border-box;
}

body,
html {
   width:100%;
   height:100%;
}

.header {
   width:100%;
   padding:2.9vh 5.2vw;
   border-bottom:2px solid Chartreuse;
   position:relative;
   z-index:2;
   height:10vmin;
}

.header .right {
   position:absolute;
   top:51%;
   -webkit-transform:translateY(-51%);
   transform:translateY(-51%);
   right:5.18vw;
   color:yellow;
   font-size:4.6vmin;
   font-weight:301;
}

.header img {
   height:100%;
}

.main-wrapper {
   height:100%;
   width:100%;
   display:flex;
   flex-direction:column;
}

.main-wrapper header {
   flex:0 0 auto;
}

.main-wrapper .columns-wrapper {
   flex:2 2 auto;
}

.columns-wrapper {
   display:flex;
}

.column-left,
.column-right {
   flex:2;
}

.column-left {
   background:red;
}

.column-right {
   background:yellow;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="main-wrapper"> 
   <header class="header" role="banner"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="Logo"> 
    <div class="right">
      aaaaa 
    </div> 
   </header> 
   <div class="columns-wrapper"> 
    <div class="column-left"> 
     <div class="column-inner"> 
     </div> 
    </div> 
    <div class="column-right">
      bbbaaaaa 
     <br> aaaaa 
     <br> aaaaa 
     <br> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials