bootstrap 3: height 100% doesn't work in the nested row - html

Question

expected
I'm trying set 100% height in the nested row with the code below:
<div class="row">
<div class="col-md-4">
<!--This is not working-->
<div style="height:100%">
First Column, First Cell
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-xs-12">
Second Column, First Cell
</div>
<div class="col-xs-12">
Second Column, Second Cell
</div>
<div class="col-xs-12">
Second Column, Third Cell
</div>
</div>
</div>
</div>
But it output as
output

Answer 1

You can use Bootstrap Tables instead of rows and columns.
UPD. I've added coloured outlines for cells.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
td {
border: 0 !important;
outline: 4px solid;
outline-offset: -8px;
padding: 16px !important;
}
.red-box {
outline-color: red;
}
</style>
<div class="container">
<table class="table">
<tr>
<td rowspan="3" class="red-box">First Column, First Cell</td>
<td>Second Column, First Cell</td>
</tr>
<tr>
<td>Second Column, Second Cell</td>
</tr>
<tr>
<td>Second Column, Third Cell</td>
</tr>
</table>
</div>

Answer 2

I would suppose you're doing it in two column layout, you can do that using bootstrap by setting the parent div with height so that.
<div style="height=100%;">
First Column, First Cell
</div>
has the basis of 100% property,
For example:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" style="height: 100px;">
<div class="row" style="height: 100px;">
<div class="col-md-12" style="height: 100px;">
<div style="height:100%;border: 1px solid black;">
First Column, First Cell
</div>
</div>
</div>
</div>
<div class="col-md-6" style="height: 100px;border: 1px solid black;">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-12">
Second Column, First Cell
</div>
<div class="col-xs-12">
Second Column, Second Cell
</div>
<div class="col-xs-12">
Second Column, Third Cell
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this help