I would like to know how I can get the sidebar on this bootstrap page to extend all the way to the bottom like the main column on the right. height:vh doesn't seem to work. Neither does height:100%.
Is this a bug in Bootstrap? I have never encountered this problem before. The sidebar has less content than the main sections, but I need for it to extend all the way to the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column Test</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="border:2px solid red; margin:20px 0 20px 0; height:100%">
<div class="row" style="border:2px solid black; height:100%">
<!-- left-side (sidebar) -->
<div class="col-xs-3" style="background-color: orange; height:100vh;">
<div class="sidebar-container" style="border: 1px solid blue;">
<h5 class="grey">TITLE 1</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 2</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 3</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
</div>
<!-- /leftside (sidebar) -->
<!--right side (content)-->
<div class="col-xs-9" style="background-color:pink; height:100%;">
<div class=" row advertisement-container">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<h3 class="col-md-12">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</h3>
<div class="cme">
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-1">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-2">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-3">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-4">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-5">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-6">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-7">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-8">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-9">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-10">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-11">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-12">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-13">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-14">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-15">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-16">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-17">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-18">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
</div>
<div class=" row advertisement-container margin-bottom-20">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<!--/right side-->
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>**strong text**
