I'm developing a web page and I have a side panel on the left with a search bar and a Google maps api v3 filling the rest of the page to the right. When I make the browser very small vertically, there is a white space between the side panel and the map, and the bottom of the browser. However, the text continues to the bottom of the browser. It looks like:

Here's my css code:

<style type="text/css">

    body {margin:0;}
        #panel {height:100%; width:300px; position:absolute; padding:0;background-color:#8C95A0;}
            #header {padding:2px; text-align:center}
            #address_instruction {position:relative; top:7%; padding:2px; text-align:center}
            #geocoder {position:relative; top:8%; padding:2px; text-align:center}
            #toggle_instruction {position:relative; top:22%; padding:2px; text-align:center}
            #layers {position:relative; top:25%; padding:2px; text-align:center}
                #layer0 {padding:2px; text-align:center}
                #layer1 {padding:2px; text-align:center}
                #layer2 {padding:2px; text-align:center}
            #link {top:50%; position:relative; padding:2px; text-align:center}
        #map_canvas {height:100%; left:300px; right:0px; position:absolute; padding:0;}

</style>

The IDs within #panel refer to the items on the left hand side in the panel. Why don't the side panel background color and map extend to the bottom of the browser?