Why does my Google maps api v3 and side panel not fill my page upon resizing?
- by Gavin
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?
