Flexbox百分比高度不起作用

Question

我正在努力使flexbox-container在高度百分比上工作，但它不起作用。但是，它在像素高度上表现正确。

我的身体分为上下两部分。鞋面高度应为70％，低度应为30％。上部工作正常但下部不正常。背景颜色不会自动占据30％的高度。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url("../photo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: -300px;
  background-attachment: fixed;
}

#upper-body {
  height: 70%;
}

#body-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#fullheight {
  height: 100%;
}

#lower-body {
  height: 30%;
}

#lower-first-block {
  height: 30%;
}

<section id="upper-body">
  <div class="dark-overlay">
    <div class="container-fluid" id="fullheight">
      <div class="row" id="fullheight">
        <div class="col-md-3" id="fullheight">
          <div id="body-left">
            <div id="header-text">
              <h1>Web<span id="head-text-color">|App</span></h1>
            </div>
            <div id="button">
              <!--This appears at down-->
              <h1>Button</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="lower-body">
  <div class="row" id="full-height">
    <div class="col-md-6 blue-background" id="full-height">
      <div id="lower-first-block">

      </div>
    </div>
    <div class="col-md-2 blue-background" id="full-height">

    </div>
    <div class="col-md-2 blue-background" id="full-height">

    </div>
    <div class="col-md-2 blue-background" id="full-height">

    </div>
  </div>
</section>

这是我想要的布局：