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

【问题标题】：Flex container with 3 columns, 100% height, and fixed-width side columns具有 3 列、100% 高度和固定宽度侧列的 Flex 容器
【发布时间】：2018-01-04 23:32:44
【问题描述】：

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

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

我将所有父母的高度设置为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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

这些默认设置将弹性项目排成一排，并为每个项目提供容器的完整高度。但是，如果您在弹性项目上设置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>

【讨论】：

【解决方案2】：

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

可能会有所帮助。我之前也问过同样的问题，flex: 1 1 0 部分有所帮助。

默认值为0 1 auto。第一个参数是 flex grow，所以你希望它们都长到相同的高度。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-13

【讨论】：

【解决方案3】：

将容器高度设置为 100vh。

就是这样

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

.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); 
}

【讨论】：