Full Height Scrolling with CSS 3 - css

Question

I am trying to layout a web page. My web page will have a search box in the upper left corner. Below the search box are my navigation items. The main content will go in the right area. I am using Zurb Foundation 5 in an effort to create this. Currently, my HTML looks like the following:
<div class="full-width full-height" style='width: 100%; max-width: 100%; height:100%;'>
<div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
<div class="row collapse">
<div class="small-12 columns">
<input id='search' type="text" />
</div>
</div>
<div class="row">
<div class="small-12 columns">
<!-- My vertical list of navigation items will go here in a <ul> -->
</div>
</div>
</div>
<div class="large-9 columns">
<!-- The main content will go here -->
</div>
</div>
I need the left portion to have a background color of 'cornsilk'. It should always take up the full height of the screen. This works. If there are more navigation items than space available, a scroll bar needs to be used only for the navigation items. In other words, I need the search box to always be visible. At this time, this is not working. The scroll bar I've created extends below the visible page area. I also have the following related CSS
*{ padding:0; margin:0}
html, body { height:100% }
How do I
a) Get the scroll bar to work within the bounds of the navigation area?
b) ensure that it is right aligned flush against the border of the navigation area?

Answer 1

What your looking for is overflow: auto
this should be placed on the navigation container .. you could add a .navigation class on that container
<div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
<div class="row collapse">
<div class="small-12 columns">
<input id='search' type="text" />
</div>
</div>
<div class="row NAVIGATION"> <!-- Add class to target nav -->
<div class="small-12 columns">
<!-- My vertical list of navigation items will go here in a <ul> -->
</div>
</div>
</div>
then the CSS would be:
.navigation {
overflow: auto;
height: whatever you want it to be;
}
EDIT:
basesd on your Fiddle . i made the navigation with oveflow auto http://jsfiddle.net/yxMn3/1/