Css 使用Flexbox填充剩余空间

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

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

标题
将
高度：100vh
添加到
.main
类

将
高度：100vh
添加到
.main
类

如果我复制了你想要的内容，那么在
中添加
display:block
。main
应该可以解决这个问题。我已经更新了您的JSFIDLE，下面是链接：

如果我复制了你想要的内容，那么在
中添加
display:block
。main
应该可以解决这个问题。我已经更新了您的JSFIDLE，下面是链接：

您需要对标记稍作更改，并对样式进行一些更改

最重要的更改是将
main
和
元素包装在一旁
并将其放入
flex:1
，使其始终填满剩余空间



@import“compass/css3”；
html，正文{
保证金：0；
高度：100vh；
}
身体{
填料：2米；
框大小：边框框；/*包括高度范围内的填充大小*/
}
.包装纸{
最小高度：100%；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex flow：列nowrap；/*作为列流动，无换行*/
柔性流动：柱状nowrap；
字体大小：粗体；
文本对齐：居中；
}
.标题{
填充：10px；
背景：番茄；
}
.页脚{
填充：10px；
背景：浅绿色；
}
.内包装{
弹性：1；/*填充剩余空间*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
字体大小：粗体；
文本对齐：居中；
}
梅因先生{
填充：10px；
文本对齐：左对齐；
背景：深蓝；
}
.1-1{
填充：10px；
背景：金；
}
.2-2{
填充：10px；
背景：火红；
}
@介质和全部（最小宽度：600px）{
.旁白{
弹性：1自动；
}
}
@介质和全部（最小宽度：800px）{
梅因先生{
flex:30px；
}
.1-1{
顺序：1；
}
梅因先生{
顺序：2；
}
.2-2{
顺序：3；
}
}

标题
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。
莫里斯·普莱斯特拉特·埃利芬德·利奥

旁白1
旁白2
页脚
您需要对标记进行一些小的更改，并对样式进行一些更改

最重要的更改是将
main
和
元素包装在一旁
并将其放入
flex:1
，使其始终填满剩余空间



@import“compass/css3”；
html，正文{
保证金：0；
高度：100vh；
}
身体{
填料：2米；
框大小：边框框；/*包括高度范围内的填充大小*/
}
.包装纸{
最小高度：100%；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex flow：列nowrap；/*作为列流动，无换行*/
柔性流动：柱状nowrap；
字体大小：粗体；
文本对齐：居中；
}
.标题{
填充：10px；
背景：番茄；
}
.页脚{
填充：10px；
背景：浅绿色；
}
.内包装{
弹性：1；/*填充剩余空间*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
字体大小：粗体；
文本对齐：居中；
}
梅因先生{
填充：10px；
文本对齐：左对齐；
背景：深蓝；
}
.1-1{
填充：10px；
背景：金；
}
.2-2{
填充：10px；
背景：火红；
}
@介质和全部（最小宽度：600px）{
.旁白{
弹性：1自动；
}
}
@介质和全部（最小宽度：800px）{
梅因先生{
flex:30px；
}
.1-1{
顺序：1；
}
梅因先生{
顺序：2；
}
.2-2{
顺序：3；
}
}

标题
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。
莫里斯·普莱斯特拉特·埃利芬德·利奥

旁白1
旁白2
页脚
代码来自：？；）是的，4lackof，它来自那个网站。代码来自：？；）是的，是那个网站上的。好的，看一看。谢谢。好的，看一看。谢谢