stretch sidebar in flexbox while having footer and a main content - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

stretch sidebar in flexbox while having footer and a main content

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

body {<!--from   w  w w  .  ja v  a 2s .  c  o m-->
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   padding-top: 80px;
}
main {
   display: flex;
   flex: 1;
}
.row {
   display: flex;
   flex-direction: row;
}
.col-l-1 {
   flex: 1;
}
.col-l-2 {
   flex: 2;
}
.padding-20 {
   padding: 20px;
}
.sidebar {
   background: #f8f8f8;
}
div, article, form { display: flex; flex:1 }


      </style> 
 </head> 
 <body> 
  <header>
    Fixed position header 
  </header> 
  <main> 
   <article> 
    <form method="post" class="row"> 
     <div class="col-l-2 padding-20">
       Table here 
     </div> 
     <div class="col-l-2 sidebar">
       Checkout stuff here 
     </div> 
    </form> 
   </article> 
  </main> 
  <footer>
    Footer here 
  </footer>  
 </body>
</html>

Related Tutorials