I am working with bootstrap and have a span2 on the left side of my page acting as a navigation menu. The nav contains a list of items and I want it to be scrollable while taking up the remaining height of the page.
Instead of absolutely positioning the nav, I want it to remain a span2 (bootstrap) so that it adjusts to the top of the page when the screen width changes.
<div class="row-fluid">
<div class="span12" style="height: 150px;">
Some Top level content
</div>
<div class="row-fluid">
<div class="span2">
Here is my nav
<div id="navigation" class="scroll">
<div id="menu">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
*{
margin:0px;padding:0px;
}
html,body{
width:100%;
height:100%;
font-family: Arimo, sans-serif;
}
a { color: #fff; }
.scroll {
overflow-y: scroll;
height: 100vh;
}
I'm trying to figure out a way in CSS to make a div occupy the remaining height of the page and then allow for scrolling within that div. Any suggestions?
Check out this fiddle to get a better understanding of the issue. Currently, both the page and the navigation menu scroll together, but I only want the nav to scroll: http://jsfiddle.net/newmanw/fbskugp7/1/