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