HTML/CSS Google maps. Make 100% high but not overflow the page.

Hi,

I want the google map on this page to take up the entire remaining space below the header,navigation and table.

http://goo.gl/2MT2Tn

As you can see now, the google map extends past the bottom of the page.

Can anyone see what I am doing wrong?

Thanks
mhdiAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Add overflow:hidden to .twoColLiqLtHdr #container line29
0
 
Dave BaldwinFixer of ProblemsCommented:
The Google javascript re-writes your page.  But you have height:100%; on the canvas <div> and for some reason, the javascript is interpreting that as 100% of the height of the window.  When I set it to 450px, it seems to work better.
0
 
mhdiAuthor Commented:
Your correct about the problem.

However setting it to 450px wouldn't make it fluid for all screens sizes though?
0
 
Dave BaldwinFixer of ProblemsCommented:
No, probably not.  But I'm not sure how the Google code is interacting with the CSS.  You need to try a few things because it is not obvious what will work.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.