Bootstrap screen - css

Question

I am trying to create a screen layout with bootstrap CSS but being a beginner, I am struggling too much. I have a row containing two columns. I need both the columns to extend to the bottom of the available screen and should be responsive. In the second column, I need a div which is always placed at its bottom. Please see the attached image. Any help is highly appreciated.
Here is what I did:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 bg-danger">
left
<ul>
<li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]">{{x}}</li>
</ul>
</div>
<div class="col-md-6 col-sm-6 bg-info">
right
<div>
<ul>
<li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]"> content {{x}}</li>
</ul>
</div>
<div class="nav bg-warning">nav</div>
</div>
</div>
</div>

Answer 1

check this out.
.constant{
position:absolute;
bottom:0;
right:0;
width:100%;
border: 2px solid #f60;
height: 40px;
}
.cover-viewport {
height: 100vh;
border: 2px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6 cover-viewport">
<!-- your content goes here-->
</div>
<div class="col-xs-6 cover-viewport">
<!-- your content goes here-->
<div class="constant"></div>
</div>
</div>

Answer 2

To make it stretch full viewport you give them all a height of 100%
Another option is to use viewport units vh on the columns
html, body, .container, .row, .row > div {
height: 100%;
}
.bg-info {
position: relative;
}
.bg-info .nav {
position: absolute;
bottom: 0;
width: calc(100% - 30px); /* 2 * 15px padding */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6 bg-danger">
left
</div>
<div class="col-xs-6 bg-info">
right
<div class="nav bg-warning">nav</div>
</div>
</div>
</div>

Answer 3

Hope the code below helps:
.constant{
position:absolute;
bottom:0;
right:0;
}
<div class="row">
<div class="col-md-6 col-sm-6">
<!-- your content goes here-->
</div>
<div class="col-md-6 col-sm-6">
<!-- your content goes here-->
<div class="constant"></div>
</div>
</div>