html - 如何使用flexbox填充剩余高度？

Question

html,
body {
  height: 100%;
}
.site-main {
  height: calc(100% - 72px);
  display: flex;
}
.site-main > div {
  min-width: 85%;
  height: 100%;
}
.site-main > aside {
  min-width: 15%;
  height: 100%;
  background-color: $darkest-blue-grey;
}

<header>
  <h1>Title</h1>
</header>
<div class="site-main">
  <div></div>
  <aside></aside>
</div>

我在 72px 的固定 height 处设置了 header。

我已将 .site-main div 的 宽度 设置为 85%。

我已经给 .site-main aside 宽度 15%。

我想要的是 .site-main div 和 .site-main aside 并排放置，并且有 .site-main 填充 header 之后的剩余空白。

并让 .site-main div 和 .site-main 放在一边 填充 .site-main 的高度。

如有任何帮助，我们将不胜感激!

Answer 1

您可以在 body 上使用 flex-direction: column，在 site-main 上使用 flex: 1。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
header {
  height: 75px;
}
.site-main {
  display: flex;
  flex: 1;
}
.site-main div {
  flex: 0 0 85%;
  background: lightblue;
}
aside {
  flex: 0 0 15%;
  background: lightgreen;
}

<header>
  <h1>Title</h1>
</header>
<div class="site-main">
  <div></div>
  <aside></aside>
</div>