Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-10-25
4
Medium Priority
?
226 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 84

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 84

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 2000 total points
ID: 39602663
Add overflow:hidden to .twoColLiqLtHdr #container line29
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

916 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