I have the following HTML content and I need a fixed sidebar with 100% height. The vertical scrollbar should appear when content is added in mainContent or Content.
<div class="mainContainer">
<h2>Title</h2>
<div class="Content">
<div class="panel panel-success">
<div class="panel-heading">
My Panel-1
</div>
<div class="panel-body">
blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
blah blah blah... ..blah blah blah.
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
My Panel-2
</div>
<div class="panel-body">
blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
blah blah blah... ..blah blah blah.
</div>
</div>
</div>
</div>
This is my CSS:
.mainContainer
{
float:right;
height: 100%;
width:350px;
padding:3px;
background:#f00;
overflow-y:auto;
}
.Content
{
background:#fff;
}