css - 按高度将页面分成多个部分，部分未扩展到指定的完整高度

Question

下面是我的代码。我把整个页面按高度划分，20%、50%、30%；

但是由于某些原因，SECOND SECTION 中的表没有得到全部 50%。也许只有10%。它驻留在行流体中。如果我 overflow hidden ，则只有标题可见。

CSS:

  .body-wrapper{
    height:100%;
  }
  .body-wrapper > fieldset div:nth-of-type(1){
    height:20%;
  }
  .body-wrapper > fieldset div:nth-of-type(2){
    height:40%;
  }
  .body-wrapper > fieldset div:nth-of-type(3){
    height:30%;
  }

html:

    <div class = "main-Frame container-fluid"> <!-- mid section -->
      <div class="well row-fluid" >
        <div class="body-wrapper">
          <fieldset>

            <div> <!-- FIRST SECTION -->
              <legend>User Profile</legend>
              <div class="row-fluid">
                <div class="col-md-2 text-right">User Name
                </div>
                <div class="col-md-4" >
                  <input style="width:90%;"type="text" placeholder="username"/>
                </div>
                <div class="col-md-2 text-right">User Email
                </div>
                <div class="col-md-3">kkk@gmail.com
                </div>
                <div class="col-md-1">
                  <input type="checkbox"/>Active
                </div>
              </div>
            </div> <!-- END OF FIRST SECTION -->

            <div> <!-- SECOND SECTION -->
              <legend>Application Defaults</legend>
              <div class = "container-fluid" style="height:100%;">
                <div class="row-fluid"  style="height:100%;">
                  <div class="col-md-10" style="height:100%;">
                    <div class="table-responsive user-table">

                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>App</th>
                          <th>Type</th>
                          <th>Setting</th>
                          <th>check</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>first</td>
                          <td>first</td>
                          <td>first</td>
                          <td>first</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                  <div class="col-md-2">
                  </div>
                </div>
              </div>

            </div> <!-- END of SECOND section -->


            <div> <!-- LAST section -->
              <legend>ChangePassword</legend>
            </div> <!-- END of footer section -->

          </fieldset>
        </div>

Answer 1

这里的问题是您的 CSS 选择器太宽泛了 - 选择器 .body-wrapper > fieldset div:nth-of-type(1)匹配既定目标(第一个 <div> 直接在字段集下，嵌套更深的 <div class="table-responsive user-table"> 。(在前面所有也匹配的元素上，您使用内联样式将它们的高度强制为 100%，因此它们不要表现出相同的问题行为。)

要解决此问题，只需通过增加选择器的特异性来缩小选择器匹配的元素范围 - 例如，仅定位直接子元素 <div>字段集下的元素，而不是所有后代元素:

.body-wrapper {
  height: 100%;
}
.body-wrapper > fieldset > div:nth-of-type(1) {
  height: 20%;
}
.body-wrapper > fieldset > div:nth-of-type(2) {
  height: 40%;
}
.body-wrapper > fieldset > div:nth-of-type(3) {
  height: 30%;
}

希望对您有所帮助!如果您有任何问题，请告诉我。