Owa A.

Posts > Flexbox: Full Height Layout

Flexbox: Full Height Layout

March 5, 2023

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

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

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

.header {
  background: tomato;
}

.main {
  background: steelblue;
  flex: 1;
}

.footer{
  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 šŸ·