Question

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

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

我将所有父母的身高设置为height: 100%，并且我不想使用带有大边距或填充的变通方法，因为我正在使用滚动条。

＆＃13;

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

＆＃13;

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

＆＃13;

可在此处找到小型演示：

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

Answer 1

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

这些默认设置将灵活项目排成一行，并为每个项目提供容器的完整高度。但是，如果您在Flex项目上设置height，则会覆盖align-items。因此，请删除您在项目上设置的任何高度。

这应该适合你：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

可能有所帮助。我曾经问过同一时间，flex: 1 1 0部分有帮助。

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

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

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

Flex容器，有3列，100％高度和固定宽度的侧柱

3 个答案: