CSS/Bootstrap div to Fill it's parent height - html

Question

I'm pretty much stuck with making side menu div's of my code filling the parent height to 100%. I've tried alot of googling and testing before comming to ask..
Code snippet: http://jsfiddle.net/zntxaspd/
html, body { height: 100%;}
.row.content { height: 100%; width:70%; margin: auto; }
.sidenav { padding-top: 20px;background-color: #f1f1f1; height: 100%;}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
h5 { font-size: 14px; border-bottom: 6px solid red; font-weight: bold; }
.rightcontainer { width:100%; height:100% margin: auto; border: 0px solid; border-radius: 4px; margin-bottom: 5px; border-bottom: 6px solid red;}
.rightcontainer .accountpanel .columncontainer .col-sm-6 { padding-right: 0px; padding-left: 0px;}
.leftcontainer {width:100%; margin: auto; margin-bottom: 5px; border-bottom: 6px solid red; }
.leftcontainer .eventinfo {width:100%; height: 38px; margin-bottom: 5px; border: 1px solid gray; }
.leftcontainer .eventinfo .split { height: 17px; }
.leftcontainer .eventinfo .split span { font-size: 12px; }
.leftcontainer .banner {width: 100%; height: 75px; border: 1px solid gray; margin-bottom: 5px; }
I can not understand why both side menu's are filling just the height of their own content instead of filling height of the parent div. Is there something I'm doing wrong? It fills fine if I dont add !DOCTYPE html to my project, but from what I understand its bad solution so I should find other way around..
Best regards

Answer 1

http://jsfiddle.net/zntxaspd/6/
Add display: flex;to .row.content:
.row.content { height: 100%; width:70%; margin: auto; display: flex; }
Add flex: 1; to .sidebar:
.sidenav { padding-top: 20px;background-color: #f1f1f1; flex: 1}
Adjust your media query to keep it responsive:
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto; display: block;}
}

Answer 2

Use bootstrap-4 CSS to achieve the desired result
Bootstrap 4
Also removed the extra row content div
html,
body {
height: 100%;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 100%;
width: 70%;
margin: auto;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
h5 {
font-size: 14px;
border-bottom: 6px solid red;
font-weight: bold;
}
.rightcontainer {
width: 100%;
height: 100% margin: auto;
border: 0px solid;
border-radius: 4px;
margin-bottom: 5px;
border-bottom: 6px solid red;
}
.rightcontainer .accountpanel .columncontainer .col-sm-6 {
padding-right: 0px;
padding-left: 0px;
}
.leftcontainer {
width: 100%;
margin: auto;
margin-bottom: 5px;
border-bottom: 6px solid red;
}
.leftcontainer .eventinfo {
width: 100%;
height: 38px;
margin-bottom: 5px;
border: 1px solid gray;
}
.leftcontainer .eventinfo .split {
height: 17px;
}
.leftcontainer .eventinfo .split span {
font-size: 12px;
}
.leftcontainer .banner {
width: 100%;
height: 75px;
border: 1px solid gray;
margin-bottom: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
<div class="row justify-content-center">
<div class="col-sm-2 sidenav">
<div class="leftcontainer">
<div class="banner"> Get Client Banner </div>
<div class="banner"> Guides Banner </div>
<h5> Event Schedule </h5>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 H</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 Hr</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 Hr n</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>B</strong></span></div>
<div class="split"><span>0 D 0 </span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 </span></div>
</div>
</div>
</div>
<div class="col-sm-7 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-3 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>