Question

以下是我的代码。我把整个页面按高度分为20％，50％，30％;

但由于某种原因，SECOND SECTION中的表格并没有得到整个50％。只有10％。它存在于排液中。如果我隐藏溢出，只有标题可见。

的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%;
}

希望这有帮助！如果您有任何问题，请告诉我。

将页面按高度划分为多个部分，不扩展到指定的完整高度

1 个答案: