Google지도에서 열의 높이와 너비를 100 %로 설정합니까?

Question

2 col 레이아웃을 가지고 있고 Google지도가 전체 높이와 너비 중 하나의 높이를 차지하도록하려면 크롬에서 제대로 작동하지만 파이어 폭스에서지도가 나타나지 않는 것 같습니다. 누구든지이 작업을 수행하는 방법에 대해 조언 할 수 있습니까?

바이올린 : 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; 
}