Is there a way to make the height of the left sidebar div equal to 100% within a row, based on the height of the right content?
I have tried setting the height to 100%, but it doesn't seem to work. Any advice would be appreciated.
<body>
<div class="content">
<div class="container main">
<div class="row 2-col">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 left">
<p>Sidebar</p>
<p>Sidebar</p>
<p>Sidebar</p>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 right">
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
</div>
</div>
</div>
</div>
</body>
html, body, .content, .main, .2-col {
width: 100%;
height: 100%;
}
.content {
background: #a1a1a1;
}
.main {
background: #666;
}
.left {
height: 100%;
background: #333;
box-sizing: border-box;
}
.right {
height: 100%;
background: #ccc;
box-sizing: border-box;
}
p {
color: #fff;
}
https://jsfiddle.net/x63qtvsh/4/
Thank you