使用 Flexbox 填充剩余空间答案

【问题标题】：Fill up remaining space using Flexbox使用 Flexbox 填充剩余空间
【发布时间】：2016-07-30 18:56:26
【问题描述】：

我希望中间行像任何其他网站一样填满整个浏览器。所以即使内容很少，我也希望中间行填满整个空间。

这是css

@import "compass/css3";

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;

  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

这里是html

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

这是小提琴 - https://jsfiddle.net/zL26otcu/

【问题讨论】：

代码来自：css-tricks.com/snippets/css/a-guide-to-flexbox ? ;)
是的 4lackof，来自那个网站。

标签： css flexbox

【解决方案1】：

您需要对标记进行少量更改并更改样式。

最重要的变化是包装你的main 和aside 元素并给出flex: 1，使其始终填满剩余空间

Updated fiddle

@import "compass/css3";

html, body {
  margin: 0;
  height: 100vh;
}
body {
  padding: 2em;
  box-sizing: border-box;             /*  include padding size within height  */
}

.wrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;   /*  flow as column, no wrap  */
  flex-flow: column nowrap;
  font-weight: bold;
  text-align: center;
}

.header {
  padding: 10px;
  background: tomato;
}

.footer {
  padding: 10px;
  background: lightgreen;
}

.wrapper-inner {
  flex: 1;                            /*  fill remaining space  */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.main {
  padding: 10px;
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  padding: 10px;
  background: gold;
}

.aside-2 {
  padding: 10px;
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .aside-1 {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside-2 {
    order: 3;
  }
}

<div class="wrapper">
  <header class="header">Header</header>
  <div class="wrapper-inner">
    <article class="main">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

【讨论】：

好的，看看。谢谢。

【解决方案2】：

将height:100vh 添加到.main 类

https://jsfiddle.net/zL26otcu/1/

【讨论】：

【解决方案3】：

如果我复制了您的目标，将 display: block 添加到 .main 应该可以解决此问题。我已经更新了你的 jsfiddle，这是链接：

https://jsfiddle.net/zL26otcu/2/

【讨论】：