Solved

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

Posted on 2013-10-25
4
222 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

739 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