Bootstrap columns 100% height - css

Question

I'm having some troubles with Bootstrap columns, I have this code:
.vertical-line{
height: 100%;
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Also in http://jsfiddle.net/z55z3den/1/
So, what I wanna do is that the container with the class quote takes the height of its parent and then I could see the vertical line set in the container with the class vertical-line
Something like this:
I've been doing some research and I found something about flex properties in CSS but I haven't been able to make it works.
I hope you guys can help me.
Thanks in advanced.

Answer 1

The vertical line is same height with content, looks bigger because of margin of the last
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.quote {
position: relative;
}
.text {
padding-left: 20px;
}
.vertical-line{
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 40px);
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Add to class body the code:
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

Answer 2

May i suggest a different approach.
Just overwrite the default bootstrap styling for the <blockquote> element by using pseudo :before and :after elements. This will be a lot simpler. That way you would not need to load an extra image and you don't have to separate the elements into columns.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
blockquote {
position: relative;
border-left-width: 0px;
margin: 20px 40px;
font-style: italic;
color: #aaaaa5;
}
blockquote:before {
content:url('http://s18.postimg.org/6kmdp3w05/quotes.png');
/*content: "\201C";*/
color: #ddddd5;
position: absolute;
top: -92px;
left: -42px;
font-family: sans-serif;
font-weight: bold;
font-size: 128px;
}
blockquote:after {
content: "";
width: 2px;
position: absolute;
left: 0px;
top: 52px;
background-color: #ddddd5;
height: calc(100% - 58px);
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.
</p>
</blockquote>
</div>
</div>
</div>