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

然后在CSS中添加特定于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;
构建一个div-wrapper englobing col-a，col-b和col-c
• 摆脱col-c-child
• col-c与flex: 1;

感谢@jelleB，他解释了我的部分内容。

Answer 1

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

试一试

Answer 2

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

如果我没有弄错，除非父容器的高度已定义，否则不能这样做。如果父容器的高度也定义为百分比，则还必须定义父容器的父容器的高度。此层次结构将继续到正文标记。

Answer 3

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

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;