Flex容器，带3列，100％高度和固定宽度的侧柱 [英] Flex container with 3 columns, 100% height, and fixed-width side columns

问题描述

然而，我需要使所有列都填充整个列

I have a 3-column body with fixed width on the sides and the middle column filling the remaining width.

我将所有父母的身高设置为身高：100％，我不我想使用一个巨大的边距或填充的解决方法，因为我使用滚动条。

I need however to make all columns fill the entire height of the page.

可以在这里找到：

解决方案

HTTPS ：//jsfiddle.net/ysn3q6aL/#& togetherjs = H9pEenhcqQ

推荐答案

当创建柔性容器（ display：flex 或 display：inline-flex ），它会自动应用 flex-direction ：row 和 align-items：stretch （以及其他初始设置）。 这些默认设置将行中的弹性项目排成一行，并将它们分别放在容器的整个高度。但是，如果您在Flex项目上设置 height ，它会覆盖 align-items 。所以删除你设置的任何高度。

This should work for you:

这应该适合你：

#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>

这篇关于Flex容器，带3列，100％高度和固定宽度的侧柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！