user308553 user308553 - 5 months ago 21
CSS Question

Dividing page into sections by height, section not expanding to full specified height

Below is my code. I divided the whole page by height, 20%, 50%, 30%;

But for some reason the table in the

SECOND SECTION
is not getting the whole 50%. only maybe 10%. It is resided in a row-fluid. If I put overflow hidden, only the header will be visible.

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

That problem here is that your CSS selectors are too broad - the selector .body-wrapper > fieldset div:nth-of-type(1) matches both the intended target (the first <div> directly under the fieldset, and the more deeply nested <div class="table-responsive user-table">. (On all preceding elements that also match, you've used inline styles to force their heights to 100%, so they don't exhibit the same problem behaviour.)

To address this issue, simply narrow down the range of elements matched by your selectors by increasing their specificity - for example, target only immediate child <div> elements under the fieldset, rather than all descendant ones:

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

Hope this helps! Let me know if you have any questions.

Comments