Flexbox body and main min-height

问题

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

回答1:

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>

回答2:

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>

来源：https://stackoverflow.com/questions/37431563/flexbox-body-and-main-min-height

标签

css

height

flexbox