Flexbox CSS Layout with header, footer, partly scrollable sidebar

user_65087 0
Viewed 1859

I'm trying the following. I've tried tons of suggestions on various resources, but there always 1 thing missing: the scroll appears on body, or on the content, the header takes up space and pushes content down, ...

These are the requirements:

  • Body does not scroll
  • Header and footer fixed
  • Searchbox does not scroll
  • Search results scroll
  • Using ngx-split, so should be making use of flexbox

Wireframe header footer sidemenu scroll

It is very similar, to these question:

flexbox css html
1 Answers

You need to treat the layout as a three step process - with each step being a different flex layout and flex-direction

  • page-wrapper
    • page-header
    • page-content
      • left-column
        • left-column-header
        • left-column content
      • right-column
    • page-footer

1 - layout the header / content / footer by using display: flex; flex-direction: column; and by applying flex-grow on the content - will have the header and footer at the top and bottom of the viewport and the flex-grow: 1 on the content will allow it to expand to thake the remaining space.

2 - layout the left and right columns by using display: flex on the page-content area; (note that the default direction is "row" so you do not need to specify it).

3 - layout the left-column-header and content by using display: flex; flex-direction: column; on the left column and applying a max-height and overflow-y: auto to the left-column-content

html, body {
height: 100vh;
overflow: hidden;
padding: 0;
margin:0
}

ul {
margin: 0;
padding:0;
list-style: none;
}

.page-wrapper {
  display: flex; 
  flex-direction: column;
  border: solid 1px #222;
}

.page-header, 
.page-footer {
  height: 30px;
  flex-shrink: 0;
 line-height: 30px;
 padding: 0 8px
}

.page-content {
  border-top: solid 1px #222;
  border-bottom: solid 1px #222;
  flex-grow: 1;
  display: flex;
}

.right-column {
 width: 60%;
 flex-grow: 1;
 border-left: solid 1px #222;
 padding: 8px 16px
}

.left-column {
 width: 40%;
 flex-shrink:0;
 display: flex; 
 flex-direction: column;
}


.left-column-header {
  height: 40px;
  flex-shrink:0;
  align-items: center;
  border-bottom: solid 1px #222;
  display: flex;
}

.left-column-header div {
  flex-grow: 1;
  padding: 4px 8px
}

.left-column-content {
  overflow-y: auto;
  max-height: calc(100vh - 100px);
  padding: 0 8px
}
<div class="page-wrapper">
  <div class="page-header">Header</div>
  <div class="page-content">
    <aside class="left-column">
      <div class="left-column-header"> 
        <div class="search-input-wrapper">
          <input type="text" placeholder="Search" />
        </div>
        <div class="search-button-wrapper">
          <button type="button" >Button</button>
        </div>
      </div>
      <div class="left-column-content">
       <ul>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
         <li>Search results</li>
       </ul>
      </div>
     </aside>
    <main class="right-column">Right column</main>
   </div>
  <div class="page-footer">Footer</div>
</div>

user_58675720
Related