Page-filling flexbox layout with top and side bars - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Page-filling flexbox layout with top and side bars

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">

* { box-sizing: border-box; } 
html { height: 100%; }
body { height: 100%; } 
#parent-of-topbar {<!-- www  . ja v  a2 s  . co  m-->
   height: 100%;
   box-sizing: border-box;
   margin: 0;
   background: #FCC;
   display: flex;
   flex-direction: column;
}
#topbar {
   padding: .2em;
   background: white;
   border: solid black;
   border-width: 0 0 .3em 0;
   color: black;
   flex: 0 0 auto;
   height: 10%; 
}
#main {
   display: flex;
   flex-direction: row;
   flex: 1 1 auto;
   height: 90%;
}
.subwindow {
   overflow-x: clip;
   overflow-y: auto;
   max-height: 100%;
   border: 3px outset #CCC;
   background: linear-gradient(to right, #CCC 0%,#AAA 100%);
}
.fixed {
   flex: 0 0 auto;
   width: 10em;
}
.stretchy {
   flex: 1 1 auto;
   width: 100%;
}


      </style> 
 </head> 
 <body id="parent-of-topbar"> 
  <div id="topbar">
    top bar content 
  </div> 
  <div id="main"> 
   <div class="subwindow stretchy">
     stretchy part 
   </div> 
   <div class="subwindow fixed">
     fixed sidebar 1; this should be scrollable, not stretch the content 
     this is a test this is a test this is a test this is a test 
     this is a test this is a test this is a test this is a test 
     this is a test this is a test this is a test 
    <details open> 
     <div style="font-size: 3em;">
       this is a test this is a test this is a test this is a test this is a test 
       this is a test this is a test this is a test this is a test 
       this is a test this is a test this is a test this is a test 
       this is a test this is a test this is a test this is a test 
       this is a test this is a test this is a test 
     </div> 
    </details> 
   </div> 
   <div class="subwindow fixed">
     2nd fixed sidebar 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials