row height is not displaying correctly

Question

I have created an html stuff using bootstrap 2.3.2 css. The html will be having four rows with different height such as for the first row it will 10%, second row - 20%, third row - 40% and the fourth row - 40% respetively. The html is rendering but the problem is that the height of each row is not displaying correctly.

Can anyone please tell me some solution for this

My code is as given below

JSFiddle

html

<div id="content">
  <div class="row1">
    <div class="row-fluid">
      <div class="span6">content1</div>
      <div class="span6">content1</div>
    </div>
  </div>
  <div class="row2">
    <div class="row-fluid">
      <div class="span6">content2</div>
      <div class="span6">content2</div>
    </div>
  </div>
  <div class="row3">
    <div class="row-fluid">
      <div class="span4">content3</div>
      <div class="span4">content3</div>
      <div class="span4">content3</div>
    </div>
  </div>
  <div class="row4">
    <div class="row-fluid">
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
    </div>
  </div>
</div>

css

.row1 {
  height: 10%;
  background: red;
}

.row2 {
  height: 20%;
  background: yellow;
}

.row3 {
  height: 40%;
  background: orange;
}
.row4 {
  height: 40%;
  background: violet;
}

#content {
  height: 100%;
}

Answer 1

In order to use a percentage based height, all ancestors must have a defined height.

Add this to your example:

html, body {
  height: 100%;
}

JSFiddle

If your elements are heavily nested, a better solution may be to use the following instead:

#content {
  height: 100vh;
}

JSFiddle