Posts > Flexbox: Full Height Layout

Flexbox: Full Height Layout

Making sure my layout is full height when using Flexbox. Header always on top, footer always on the bottom is key šŸ”‘

  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

.header {
  background: tomato;

.main {
  background: steelblue;
  flex: 1;

  background: pink;

Make sure that the parent container of the header, main, and footer is where Iā€™m applying the styles for the above example the <body>. ( example: React you have to apply it into. App as this is the parent container )

Tags šŸ·