How to make two nested Bootstrap rows together fill their parent column? - html

Question

I am attempting to create a layout with nested rows. My problem is that if I let the first of the nested rows determine its height automatically (from its contents), then I can't reliably set the height of the second one. My hope was that setting the second one to height:100% would take into account the first row div, but it does not, and instead overflows the container.
In my example below, the div with class="orange" is the first one, and the div with class="blue" is the culprit that overflows the container.
Although I could set each of the nested rows to be a percentage of the parent, and thus have that work, I am hoping there is a better solution within bootstrap that solves this. The reason I don't want to is I want a header, and to have the first row be the size of that header.
Here is a sample layout of what I am attempting:
.blue {
background-color: blue;
}
.orange {
background-color: orange;
}
.green {
background-color: green;
}
.full-height {
height: 100%;
}
#main {
height: 200px;
width: 100%;
background-color: gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main">
<div class="container-fluid full-height">
<div class="row full-height">
<div class="col-xs-3 green full-height">
Words!
</div>
<div class="col-xs-9 full-height">
<div class="row orange"> Words! </div>
<div class="row blue full-height"> Other words!</div>
</div>
</div>
</div>
</div>
JSFiddle

Answer 1

You should nest the orange row in the blue row, like this:
.blue {background-color: blue;}
.orange {background-color: orange;}
.green {background-color: green;}
.full-height {height: 100%;}
#main {height: 200px; width: 100%; background-color: gray;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main">
<div class="container-fluid full-height">
<div class="row full-height">
<div class="col-xs-3 green full-height">
Words!
</div>
<div class="col-xs-9 full-height">
<div class="row blue full-height">
<div class="col-xs-12">
<div class="row orange">
<div class="col-xs-12">Words!</div>
</div>
Other words!
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/759v0hyL/2/