使用Flexbox填充剩余空间 [英] Fill up remaining space using Flexbox

问题描述

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

I want the middle row to fill up whole browser just like any other websites. So even if there are few contents, I want the middle row to fill the entire space.

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

推荐答案

您需要对标记进行少量更改，并对样式进行一些更改.

You need a minor markup change and a few changes of your styles.

最重要的更改是包装main和aside元素并赋予该flex: 1，使其始终填充剩余空间

The most important change is to wrap your main and aside elements and give that flex: 1, making it always fill remaining space

更新了小提琴

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

这篇关于使用Flexbox填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！