Flexbox body and main min-height

Use flex: 1 on the centered element:

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

.Site-content {
  flex: 1;
  background-color:#bbb;
}
<body class="Site">
  <header>This is the header text ☺</header>
  <main class="Site-content">…</main>
  <footer>This is the footer text ☻</footer>
</body>

To get min-height with relative units working even in IE11 it needs just a tiny trick.

The nature of min-height is to overwrite the height when height is smaller then min-height. Very clear! But the pitfall is when min-height has a realitve unit (% or vh) and height is not set. Since it is relative it has no basis to relay on.

For all major browsers except Internet Explorer one possibility is to change the unit from % to vh:

body {
  min-height: 100vh;
}

For Internet Explorer it needs a height (will be overwritten from min-height):

body {
  height: 1px;
  min-height: 100vh;
}

or to keep % the rules has to be applied to html too:

html, body {
  height: 1px;
  min-height: 100%;
}

A cross browser solution for the OP needs height: 1px on body and of course flex-grow: 1 for .wrap to let it grow faster then menu and footer:

body,
html {
  padding: 0;
  margin: 0;
  height: 1px; /* added */
  min-height: 100%;
}

body {
  display: flex;
  background: #eee;
  flex-direction: column;
}

.menu {
  background: red;
  color: #fff;
  padding: 10px;
}

.wrap {
  display: flex;
  flex-grow: 1; /* added */
}

.sidebar {
  background: #ddd;
  width: 300px;
}

.main {
  background: #ccc;
  flex: 1;
}

.footer {
  background: #000;
  color: #fff;
  padding: 10px;
}
<div class="menu">Menu</div>

<div class="wrap">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
</div>

<div class="footer">Footer</div>

Tags:

Css

Height

Flexbox

Recent Posts