如何设置视口单位的百分比高度？

Question

我有一个高度为100vh的主div，我试图设置它的后代的百分比宽度和高度 - 但由于某种原因我不能......

我试图设置后代divs height：inherit - 所以他们将继承master div中的单位 - 但是效果不好。

这是我的Fiddle - 我试图设置百分比高度的div是灰色的...标记为1 2 3 ...

这是我的HTML

    <div class="article page_user">
      <div class="header_container">
        <div class="header_wrapper">
          <div class="user_inner_div">
            <div class="user_profile_pic"><img src="https://cdn2.iconfinder.com/data/icons/rcons-user/32/male-shadow-fill-circle-512.png"></div>
            <div class="user_header_text">
              <p>Foo</p>
              <p>Foo Foo</p>
            </div>
          </div>
          <button>DÉCONNEXION</button>
        </div>
        <div class="user_tabs_links">
          <ul class="user_tabs_ul" id="myTab">
            <li class="active"><a data-target="#tab1" data-toggle="tab">tab 1</a></li>
            <li><a data-target="#tab2" data-toggle="tab">tab 2</a></li>
            <li><a data-target="#tab3" data-toggle="tab">tab 3</a></li>
            <li><a data-target="#tab4" data-toggle="tab">tab 4</a></li>

          </ul>
        </div>
      </div>

      <div class="user_tabs_content">
        <div class="tab-content">
          <div class="tab-pane active" id="tab1">
            <div class="user_settings_row">
              <div class="user_settings_box">
                <p>1</p>
              </div>
              <div class="user_settings_box">
                <p>2</p>
              </div>
              <div class="user_settings_box">
                <p>3</p>
              </div>
            </div>
            <div class="user_settings_row">
              <div class="user_settings_box">

              </div>
            </div>
            <div class="user_settings_row">
              <div class="user_settings_box">

              </div>
            </div>

          </div>

        </div>
      </div>

    </div>

这是CSS

    /* Styles go here */

    .user_header {
      float: left;
      background-color: #49c8c1;
      height: 20%;
      width: 100%;
    }

    .user_page_cont {
      float: left;
      height: 80%;
      width: 100%;
      background-color: #00a65a;
    }

    .page_user {
      height: 100vh;
    }

    .user_header_text {
      line-height: 1.1;
      margin-left: 1vw;
    }

    .user_header_text p {
      margin-bottom: 0px!important;
    }

    .user_header_text p:nth-child(1) {
      font-family: 'Montserrat ultraLight', sans-serif;
      font-size: 2vw;
      color: #3f4760;
    }

    .user_header_text p:nth-child(2) {
      font-family: 'Montserrat Bold', sans-serif;
      font-weight: 600;
      font-size: 2vw;
      color: #3f4760;
    }

    .header_wrapper {
      display: flex;
      margin-bottom: 5vh;
      justify-content: space-between;
      align-items: center;
    }

    .header_container button {
      background-color: #49c8c1;
      border: 1px solid white;
      border-radius: 5px;
      font-size: 0.8vw;
      padding: 5px 15px 5px 15px;
      color: #fff;
      outline: none;
    }

    .header_container button:hover {
      background-color: #40afa9;
      outline: none;
    }

    .header_container button:active {
      background-color: #2d7c78;
      outline: none;
    }

    .user_inner_div {
      display: flex;
      align-items: center;
    }

    .header_container {
      position: relative;
      min-height: 20%;
      padding: 45px 30px 15px 30px;
      width: 100%;
      background-color: #49c8c1;
      margin: 0 0 0 0;
    }

    .user_profile_pic img {
      width: 4vw;
    }

    .user_tabs_ul {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
    }

    .user_tabs_links {
      position: absolute;
      bottom: 0px;
    }

    .user_tabs_ul>li {
      padding-bottom: 8px;
      position: relative;
      display: block;
      float: left;
      margin-bottom: -1px;
      margin-right: 2vw;
    }

    .user_tabs_ul>li>a {
      /*margin-right: 1.5vw;*/
      font-size: 0.8vw;
      line-height: 1.428571429;
      color: #3f4760;
    }

    .user_tabs_ul>li.active {
      border-bottom: 3px solid white;
    }

    .user_tabs_ul>li.active>a {
      color: #fff;
    }

    .user_tabs_ul>li>a:hover {
      color: #fff;
    }

    .user_tabs_content {
      min-height: 80%;
    }


    /*-----------Settings Tabs------------*/

    .user_settings_box p {
      color: #fff;
    }

    .user_settings_row {
      display: flex;
      justify-content: space-between;
    }

    .user_settings_box {
      padding: 5px;
      background-color: grey;
      height: 38%;
      width: 30%;
      border-radius: 14px;
      margin-right: 1%;
      margin-left: 1%;
    }