html - 具有 100% 高度的 Flexgrid chalice

Question

我对“ chalice ”布局进行了调整，您会注意到 #main 有一个 min-height: 800px。我真正想要的是 100% 的高度，然后当我在 部分 中添加内容时，布局的其余部分继续向下(就像现在一样)。

知道如何使用 100% 高度而不明确设置 800px 来实现这一点吗？

body {
  font: 24px Helvetica;
  background: #999999;
  margin: 0;
  padding: 0;
  height: 100%;
}

#main {
  min-height: 800px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row;
}

#main>article {
  border: 1px solid #cccc33;
  background: #dddd88;
  flex: 3 1 60%;
  order: 3;
}

#main>nav {
  border: 1px solid #8888bb;
  background: #ccccff;
  flex: 1 6 70px;
  order: 1;
  max-width: 70px;
  min-width: 70px;
}

#main>aside {
  border: 1px solid #8888bb;
  background: #ccccff;
  flex: 1 6 300px;
  order: 2;
  max-width: 300px;
  min-width: 300px;
}

header {
  display: block;
  padding: 5px;
  min-height: 70px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}

section {
  margin: 10px;
}

.container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row;
}

.container>.field {
  width: 100%;
  background: #dddd88;
  order: 2;
}

.container>.left {
  width: 4px;
  background: black;
  order: 1;
}

.container>.right {
  width: 4px;
  background: black;
  order: 3;
  display: flex;
}

.top,
.bottom {
  display: block;
  height: 4px;
  background: red;
}

<div id='main'>
  <article>
    <header>header</header>
    <section>
      <div class="top"></div>
      <div class="container">
        <div class="field">
          Sub Container w/ borders
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="bottom"></div>
    </section>
  </article>
  <nav>nav</nav>
  <aside>aside</aside>
</div>

Answer 1

如果您希望元素占据 100% 的视口(viewport)高度，并且可以选择扩展以容纳额外的内容，请使用 min-height: 100vh ( demo )。

由于以下帖子中解释的原因，百分比高度不如视口(viewport)百分比高度高效且易于使用。

• Working with the CSS height property and percentage values
• Font size with percentage value (%) not scaling with screen size