谷歌地圖消耗100％的高度和寬度的列？

Question

我有一個2 col佈局，並希望我的谷歌地圖佔用他們中的一個的完整高度和寬度，這似乎在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; 
}