使用 flexbox 设置单列样式答案

【问题标题】：Style one single column with flexbox使用 flexbox 设置单列样式
【发布时间】：2016-05-12 06:06:59
【问题描述】：

也许我想要一些不可能的事情。我想要一个只有一个带有 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>

然后在 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 与flex: 1;

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

【问题讨论】：

如果不让列子的父级也使用 flexbox，您就无法做到这一点。你需要一些计算 colc-c div 高度的方法。
谢谢。幸好找到了解决方案，现在我真的明白你的意思了。你所说的一切都很有道理。再次感谢您。

标签： html css flexbox

【解决方案1】：

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

试一试

【讨论】：

非常感谢！我会试试看！然后我给你反馈。
谢谢！它确实为解决方案的一半做出了贡献。另一半是改flex-direction: column；到flex-direction: row;

【解决方案2】：

我怀疑你的问题出在height:100%

如果我没记错的话，除非父容器定义了它的高度，否则你不能这样做。如果父容器的高度也被定义为百分比，那么父容器的父容器的高度也必须被定义。此层次结构一直延续到 body 标记。

【讨论】：

感谢您的回答。我的错。我应该提到我有高度为 100% 的 body 和 html。

【解决方案3】：

如果您能够包装中间 div，您可以执行以下操作：

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.container #body {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

header,
footer {
  width: 100%;
}

.left,
.right {
  width: 100px; /*change to whatever width you want*/
}

.center {
  flex-grow: 1;
}

/*styles for demo*/
header,
footer {
  height: 50px;
  background: blue;
}

.left,
.right {
  background: green;
}

.center {
  background: red
}

<div class="container">
  <header></header>
  <div id="body">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
  <footer></footer>
</div>

【讨论】：