html - Flexbox 填充剩余窗口高度不起作用

Question

我正在尝试使用 Flexbox 制作一个包含两行的布局。

两行都没有固定的高度。

第一行较小并包含 Logo 。

第二行有两列，必须填充屏幕的剩余高度。

这对于 Flexbox 来说是可能的吗？

* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  padding: 1.85185vh 4.16667vw;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  z-index: 1;
  height: 9vmin;
}
.header .right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 4.16667vw;
  color: #191919;
  font-size: 3.5vmin;
  font-weight: 300;
}
.header img {
  height: 100%;
}
.main-wrapper {
  height: 100%;
  width: 100%;
}
.columns-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.column-left,
.column-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.column-left {
  background: red;
}
.column-right {
  background: yellow;
}

<div class="main-wrapper">

  <header class="header" role="banner">
    <img src="http://img.logospectrum.com/dec/dummy-logo.jpg" alt="Logo">
    <div class="right">
      aaaaa
    </div>
  </header>

  <div class="columns-wrapper">
    <div class="column-left">
      <div class="column-inner">

      </div>
    </div>
    <div class="column-right">bbb</div>
  </div>

</div>

演示:http://codepen.io/riogrande/pen/RGboox

Answer 1

使.main-wrapper成为列方向的 flex 容器。

这会将子项(header 和 .columns-wrapper)堆叠成两行。

要使 .columns-wrapper 占用容器中的所有剩余空间，请应用 flex: 1。

revised codepen

* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  padding: 1.85185vh 4.16667vw;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  z-index: 1;
  height: 9vmin;
}
.header .right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 4.16667vw;
  color: #191919;
  font-size: 3.5vmin;
  font-weight: 300;
}
.header img {
  height: 100%;
}
.main-wrapper {
  height: 100%;
  width: 100%;
  display: flex;              /* NEW */
  flex-direction: column;     /* NEW */
}
.columns-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex: 1;                   /* NEW */
}
.column-left,
.column-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.column-left {
  background: red;
}
.column-right {
  background: yellow;
}

<div class="main-wrapper">

  <header class="header" role="banner">
    <img src="http://img.logospectrum.com/dec/dummy-logo.jpg" alt="Logo">
    <div class="right">
      aaaaa
    </div>
  </header>

  <div class="columns-wrapper">
    <div class="column-left">
      <div class="column-inner">

      </div>
    </div>
    <div class="column-right">bbb</div>
  </div>

</div>