Solved

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

Posted on 2013-10-25
4
220 Views
Last Modified: 2013-11-11
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
0
Comment
Question by:mhdi
  • 2
4 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39602263
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
 

Author Comment

by:mhdi
ID: 39602298
Your correct about the problem.

However setting it to 450px wouldn't make it fluid for all screens sizes though?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39602341
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39602663
Add overflow:hidden to .twoColLiqLtHdr #container line29
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question