two twitter bootstrap columns, both need to have the same height - html

Question

I need the right column to have the same height as the left column, because the border needs to go all the way down to the end of the page, it is apart of the design.
I thought about setting the border on the row class but there is spacing between the column and row and was unable to override that spacing.
Any help getting the right column to stretch the entire page would be appreciated, thanks.
http://www.bootply.com/117727
css
html, body { min-height: 100%; }
.container { min-height: 100%; }
.left { border: 1px solid red; }
.row { border: 1px solid purple; }
.right { border: 1px solid green; height: 100%; }
html
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-8 left">
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
</div>
<div class="col-sm-4 right">
<p>this is a paragraph</p>
</div>
</div>
</div>
</div>

Answer 1

Add a class .equalCol to both of your column. And use this jQuery code to do the magic.
BOOTPLY DEMO
var highestCol = Math.max($('.left').height(),$('.right').height());
$('.equalCol').height(highestCol);
The code here is calculating and comparing the height of both columns and storing the max value in the highestCol variable. Later that highest value is being applied to both the column via same class i.e. .equalCol