使用Flexbox填充剩余空间

Question

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

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

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

Answer 2

添加height:100vh到.main类

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

Answer 3

如果我复制了要去的内容，请将display: block添加到.main以解决此问题。我已经更新您的jsfiddle这里的链接：

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