將頁面按高度劃分，不擴展至全部指定高度

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

希望這有助於！如果您有任何問題，請告訴我。