使用 Flexbox 设置一列的样式

Question

也许我想要一些不可能的事情。我想要一个只有一个使用 Flexbox 设计的列的网站。目的是无论该列内容的大小如何，只有一列将其高度拉伸到页脚。类似于下面的结构：

我尝试用这段代码来实现这一点（我正在使用引导程序）：

<div class="container-fluid">
   <div class="row">  
     <header class="col-md-12">
       stuff...
     </header>
     <div class="col-md-1 col-a">
       stuff...
     </div>
     <div class="col-md-10 col-b">
       Stuff...
     </div>
     <div class="col-md-1 col-c">
        <div class="col-c-child">
          Stuff..
        </div>
     </div>
     <footer class="col-md-12">
       Stuff
     </footer>
   </div>
</div>

然后在 CSS 中添加特定于col-c和的内容col-c-child：

.col-c {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.col-c-child {
  flex: 1;
}

但不工作。任何想法？

解决方案：

• 创建一行用于header，其他行用于内容，其他行用于footer，也就是说 - 不要将所有内容都放在同一行中。
• display:flex使用and构建一个包含 col-a、col-b 和 col-c 的 div 包装器flex-direction: row;
• 摆脱 col-c-child
• col-c 与flex: 1;

感谢@jelleB，他向我解释了其中的一部分。

Answer 1

• 将页眉和页脚放在不同的行中。
• 你应该在 col-a 下面建立一个 div （没有内容）
• 在放置 col-a/col-b/col-c 的行上使用 min-height: 100%

试一试