Flexbox with fixed header and footer and scrollable content

by

You can do something like this:

html, body {
  margin: 0;
  height: 100%; /* can also use viewport units (height: 100vh) */
}

#container {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

main {
  flex: 1; /* takes the remaining height of the "container" div */
  overflow: auto; /* to scroll just the "main" div */
}

section {
  height: 100%; /* takes the visible area of the "main" div */
  overflow: auto; /* recommended */
  border-bottom: 1px solid;
  background: lightgreen;
}

header {background: #f88}
section:last-child {border: none}
footer {background: lightblue}
<div id="container">
  <header>top</header>
  <main>
    <section>1st</section>
    <section>2nd</section>
    <section>3rd<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
    </section>
    <section>4th</section>
    <section>5th</section>
  </main>
  <footer>bottom</footer>
</div>

More Related Contents:

  1. Why don’t flex items shrink past content size?
  2. Targeting flex items on the last or specific row
  3. Fill the remaining height or width in a flex container
  4. How to vertically align text inside a flexbox?
  5. Equal height rows in a flex container
  6. How to specify line breaks in a multi-line flexbox layout?
  7. How to Right-align flex item?
  8. How to remove the space between inline/inline-block elements?
  9. How to add 1px margin to a flex item that is flex: 0 0 25%?
  10. flex container min-height ignored in IE
  11. Keep the middle item centered when side items have different widths
  12. Maintain image aspect ratio when changing height
  13. float does not work in a flex container
  14. How can I have two fixed width columns with one flexible column in the center?
  15. Is there a way to remove a div but keep its elements?
  16. CSS grid – maximum number of columns without media queries
  17. All widths set to width of widest element
  18. 5 items per row, auto-resize items in flexbox
  19. flex-grow not working in column layout
  20. CSS – How to have children in different parents the same height?
  21. Why does flexbox stretch my image rather than retaining aspect ratio?
  22. How to make a sticky footer using flexbox in IE11?
  23. Height of flex container not working properly in Safari
  24. Flexbox, z-index & position: static: Why isn’t it working?
  25. How to make a flex item not fill the height of the flex container? [duplicate]
  26. Can flexbox detect when a flex item wraps?
  27. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  28. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment