Google地图和高度100％的问题？

Question

I'm having an issue getting the height to adjust so that the map will actually appear - I know that I have to set the html and body height to 100% (which I did) and the parent div to 100% (hence the .info div having 100% height) but for some reason it's still not rendering the map properly - the width works fine, but the height doesn't.

I've included a jsfiddle to demonstrate what I mean.

These are the styles I have so far (not including the javascript)

Address & Phone

 <div class="mapWrapper"> <div id="map-canvas"></div> </div> </div> 

html, body {
    width: 100%;
    height: 100%;
}
}
.mapWrapper {
    width: 100%;
    height: 100%;
    margin-bottom: 5%;
    margin-left: 3%;
    padding: 0;
}
#map-canvas {
    width: 65%;
    height: 65%;
    min-height: 65%;
    padding: 0;
    margin: 0;
    border: 3px solid #355868;
}
.info {
    width: 100%;
    height: 100%;
    float: left;
    padding-left: 30px;
}

Answer 1

Actually you've a syntax error in your CSS selector: }.mapWrapper { ... } Remove the first closing curly brace before the .mapWrapper class, And it would work.

So the CSS engine ignores the .mapWrapper { ... } rules and .mapWrapper element (which is the parent of .map-canvas ) , wont't have an explicit height value.

Hence, according to spec MDN , for the height property:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to auto . A percentage height on the root element is relative to the initial containing block.

UPDATED FIDDLE .

Answer 2

For anyone else wondering - using em's over percentages did in fact allow the height to properly adjust. Not entirely sure if that requires you to set the height of parent elements, but all I did was change 100% to an em value, and it worked.