使用 display: flex 使 div 填充列中剩余的垂直空间答案

【问题标题】：Make a div fill the remaining vertical space in a column using display: flex使用 display: flex 使 div 填充列中剩余的垂直空间
【发布时间】：2015-02-03 02:43:33
【问题描述】：

如何使用display: flex 使 div 填充剩余的垂直空间？

在下面的示例中，main 元素应填满导航未使用的所有空间。如果这工作正常，我们就不会看到任何红色。

http://jsfiddle.net/36r3mL36/

HTML：

<nav></nav>
<main></main>

CSS：

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}

nav {
    height: 40px;
    background: orange;
}

main {
    display: flex;
    flex: 1;
    background: purple;
}

【问题讨论】：

标签： css layout flexbox

【解决方案1】：

尝试在body 选择器旁边添加html。

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}

但是，我建议将 flex 东西放在容器中。

html, body, .container {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    background: red;
}

nav {
    height: 40px;
    background: orange;
}

main {
    display: flex;
    flex: 1;
    background: purple;
}

<div class="container">
  <nav></nav>
  <main></main>
</div>

【讨论】：