user308553 user308553 - 2 years ago 72
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

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.


.body-wrapper > fieldset div:nth-of-type(1){
.body-wrapper > fieldset div:nth-of-type(2){
.body-wrapper > fieldset div:nth-of-type(3){


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

<div> <!-- FIRST SECTION -->
<legend>User Profile</legend>
<div class="row-fluid">
<div class="col-md-2 text-right">User Name
<div class="col-md-4" >
<input style="width:90%;"type="text" placeholder="username"/>
<div class="col-md-2 text-right">User Email
<div class="col-md-3">
<div class="col-md-1">
<input type="checkbox"/>Active
</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">

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

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

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


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download