Solved

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

Posted on 2013-10-25
4
219 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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult 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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

821 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