html - 使用 flexbox 设置单列样式

Question

也许我想要一些不可能的东西。 我想要一个只有一个单列样式的网站，使用 flexbox。目的是无论列内容的大小如何，只有一列将其高度延伸到页脚。类似下面的结构:

我尝试使用这段代码(我正在使用 Bootstrap )实现这一目标:

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

然后在 col-c 和 col-c-child 的 CSS 中添加:

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

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

但是不工作。 有什么想法吗？

解决方案:

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

感谢@jelleB 为我阐明了其中的一部分。

Answer 1

• 将页眉和页脚放在不同的行中。
• 您应该在 col-a 下方构建一个 div(无内容)
• 在放置col-a/col-b/col-c的行上使用min-height: 100%

试一试