Login/Register
Flexbox body and main min-height
Asked Answered
Solved cssheightflexbox
C

2

22

https://jsfiddle.net/vz7cLmxy/

I'm trying to have the body to expand but the min-height does not work. I've read other related topics but can't get my head around it.

CSS and html

body,
html {
  padding: 0;
  margin: 0;
  min-height: 100%;
}

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

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

.wrap {
  display: flex;
}

.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>

Expected result is that main is streched to fill the height if it's less than 100%.

Callisthenics answered 25/5, 2016 at 8:22 Comment(1)
looks very much alike : #25098542 – Snuffer
G
18

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>
Garnishment answered 25/5, 2016 at 8:26 Comment(1)
Thanks! A combination with setting flex: 1 on .wrap (in my case) and having width: 100% on html (instead of min-height) did the trick! – Kola
M
7

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>
Malefaction answered 28/9, 2019 at 10:31 Comment(3)
The problem with height: 1px is that you lose the autoscaling functionality with content. So in real life the min-height can just as well be made height. Losing the autoscaling means the content will never make the element grow beyond the min-height, and thus rendering the property useless. – Whelan
@GuidoBouman @kmgt I just had this problem, and setting height to fit-content instead of 1px worked for me. It gave height a value that min-height could override, but kept the auto-scaling functionality you'd lose otherwise. – Belvabelvedere
You'll guess it! IE don't like fit-content. caniuse/fit-content – Malefaction

© 2022 - 2024 — McMap. All rights reserved.