谷歌地图消耗100％的高度和列宽？

Question

我有一个2列布局，并希望我的谷歌地图占据其中一个的完整高度和宽度，这似乎在Chrome中工作正常但在Firefox中，地图似乎没有出现？任何人都可以建议如何使这项工作？

小提琴：http://jsfiddle.net/r2zqg/

CSS

.container {
    width: 100%;
    height: 100%;
    display: table;
}

.col {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
}

.col:first-child {
    background: #f9f9f9;
}

#map-canvas {
    height: 100%;
    width: 100%;
}

HTML

<div class="container">
    <div class="col">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed animi aliquam quae voluptates nam obcaecati harum similique sit vel molestiae. Dolor quam eum reiciendis quibusdam soluta dolore aspernatur voluptatem adipisci!</p>
    </div>
    <div class="col">
      <div id="map-canvas"></div>  
    </div>
</div>

Answer 1

你的专栏没有高度。

working (in firefox) fiddle

.col {
    width: 50%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}