html - 具有 3 列、100% 高度和固定宽度侧列的 Flex 容器

Question

我有一个 3 列的主体，两侧的宽度固定，中间的列填充剩余的宽度。

但是，我需要让所有列填满页面的整个高度。

我将所有 parent 的高度设置为height: 100%而且我不想使用具有巨大边距或填充的变通方法，因为我正在使用滚动条。

#container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
}

.col-side {
  width: 240px;
  height: 100%;
}

#col1 {
  border-right: 2px solid rgba(0, 0, 0, 0.12);
}

#col3 {
  border-left: 2px solid rgba(0, 0, 0, 0.12);
}

<div id="container">
  <div class="col-side" id="col1">
    Left
  </div>
  <div class="col" id="col2">
    Center
  </div>
  <div class="col-side" id="col3">
    Right
  </div>
</div>

可以在这里找到小演示:

https://jsfiddle.net/ysn3q6aL/#&togetherjs=H9pEenhcqQ

Answer 1

当您创建一个 flex 容器(display: flex 或 display: inline-flex)时，它会自动应用 flex-direction: row和 align-items: stretch(以及其他初始设置)。

这些默认设置将 flex 元素排成一行，并为每个元素提供容器的完整高度。但是，如果您在 flex 元素上设置 height，它会覆盖 align-items。因此，删除您在元素上设置的所有高度。

这应该适合你:

#container {
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.col-side {
  flex: 0 0 240px;
}

#col2 { flex: 1; }

#container > div + div {
  border-left: 2px solid rgba(0, 0, 0, 0.12);
}

#col1 { background-color: lightgreen; }
#col2 { background-color: tomato; }
#col3 { background-color: aqua; }
body  { margin: 0; }

<div id="container">
  <div class="col-side" id="col1">Left</div>
  <div class="col" id="col2">Center</div>
  <div class="col-side" id="col3">Right</div>
</div>