I have been working on my Angular app and have implemented ng-include to dynamically add content to a template within the page. The issue I'm facing is that this specific area ends up being longer than both the html and body elements where it resides.
html,
body {
height: 100%;
}
#main {
height: 100%
}
#left {
background-color: grey;
height: 100%;
}
#right {
background-color: yellow;
height: 100%
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div id="main" class="row">
<div id="left" class="col-sm-6 col-xs-6">
<div id="sidebar">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>
</div>
<div id="right" class="col-sm-6 col-xs-6">
<div id="somethingLong">
<div id="bigItem">
<h2> My big Car </h2>
</div>
<div id="bigItem">
<h2> My big house </h2>
</div>
<div id="bigItem">
<h2> My big Paycheck </h2>
</div>
<div>
<div ng-include src="'template.html'"></div>
</div>
</div>
</div>
</div>
<!-- template -->
<script type="text/ng-template" id="template.html">
<div>
<h1>Angular Script</h1>
</div>
<div>
<h1>Angular Script</h1>
</div>
<div>
<h1>Angular Script</h1>
</div>
<div>
<h1>Angular Script</h1>
</div>
</script>Is there a way to make sure my left sidebar matches the length of the right sidebar?