Overflow: scroll showing scrollbars only over portion of content - css

Question

Below you can see an image of an interface I've created.
I need scrollbars only to appear under the search bar, this part of the page has an ID of page. So I set body height to 100% and set its positioning to relative. I then set the page's height to 100% and gave it positioning of absolute. After doing this I do get scrollbars but they only show when the content is well squished.
The scrollbars need to show over the whole of the content and not just when the window is this small. Any help would be much appreciated. Below I have pasted some code that should help.
body {
font-family: Helvetica, Arial, sans-serif;
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #efefef 0%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #efefef 0%,#e0e0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
height: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
overflow: hidden;
position: relative;
}
#page {
padding: .4em 15px;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
position: absolute;
}