Create menu bar header and content with flex item - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Bar

Description

Create menu bar header and content with flex item

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

* {<!--   w ww  .  ja va  2s  .  c  o  m-->
   box-sizing: border-box;
}
html,
body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}
.layout {
   overflow: hidden;
   border: solid;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}
.menu {
   overflow: hidden;
   border: solid red;
   flex-grow: 0;
   flex-shrink: 0;
}
.header {
   overflow: hidden;
   border: solid green;
   flex-grow: 0;
   flex-shrink: 0;
}
.content {
   overflow: hidden;
   border: solid blue;
   flex-grow: 1;
   flex-shrink: 1;
   height:450px;
}
.scrollable-content {
   overflow: auto;
   height: 100%;
   width: 100%;
}


      </style> 
 </head> 
 <body> 
  <div class="layout"> 
   <div class="menu">
     Menu 
   </div> 
   <div class="header">
     Header 
   </div> 
   <div class="content"> 
    <div class="scrollable-content"> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
     <div>
       Lorem ipsum 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials