Clever Geek Handbook

Create layout with fixed header, fixed sidebar navigation, fixed content using flexbox

I am creating a layout for a web application using FlexBox. Please note that I am not trying to use bootstrap for this. I just want to do this in regular flexbox css.

Here is the structure I want:

Row1: Fixed 64px header. Row2: Fixed a seat that spans 250px on the left side, Fixed content that spans the rest of the right side.

<div id="row1">
     <div class="header"></div>
</div>
<div id="row2">
     <div class="sidenav"></div>
     <div class="main-content"></div>
</div>

The key here is that the sidenav and main content should be 100% of the screen with their own scroll bar. The actual browser scrollbar should never be displayed horizontally or vertically.

+3


source to share


2 answers


I would body

flex column

at height 100vh

, set #row2

for height and use overflow-y: scroll

on .sidenav

and.main-content 



body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#row2 {
  display: flex;
  flex: 1 0 0;
}
.header {
  height: 64px;
}
.sidenav {
  flex: 0 0 250px;
}
.main-content {
  flex: 1 0 0;
}
.sidenav, .main-content {
  overflow-y: scroll;
}
      

        
        
        
      

    
<div id="row1">
     <div class="header">header</div>
</div>
<div id="row2">
     <div class="sidenav">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div>
     <div class="main-content">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div>
</div>
Run codeHide result


+4


source


Below is an example using flexbox



body,
html {
  height: 100%;
  margin: 0
}

#row1 {
  display: flex;
  height: 64px;
  background: red;
  position: fixed;
  width: 100%;
}

#row2 {
  display: flex;
  top: 64px;
  position: relative;
  height: calc(100% - 64px);
  width: 100%
}

.sidenav {
  position: fixed;
  width: 250px;
  height: calc(100% - 64px);
background: green;
  overflow-y: scroll
}

.main-content {
  flex: 1;
  background: blue;
  overflow-y: scroll
}
      

        
        
        
      

    
<div id="row1">
  <div class="header"></div>
</div>
<div id="row2">
  <div class="sidenav">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text end </div>
  <div class="main-content">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text </div>
</div>
Run codeHide result


+2


source






More articles:


All Articles