設置谷歌地圖容器大小等於md卡內容寬度

Question

如何設置谷歌地圖div容器大小等於md卡內容寬度？

我有以下代碼，但它不起作用。

<style> #map { width: 100%; height: 100%; } </style> 

<md-card flex> 
    <md-card-content> 
     <div layout="column"> 
      <md-input-container flex="100"> 
      <!-- ... --> 
      <div id="map"></div> 
     </div> 
    </md-card-content> 
</md-card> 

我嘗試以下解決方案（link，link），但它並沒有爲我工作。我也試過 我會希望得到的是這樣的：

Answer 1

我不使用的角度，但我會說這是因爲高度是不是一個父容器設置。 從你發佈的圖片看來，你想要平方地圖。 可以使用填充特技保持高寬比：

.map-container { 
 
    position: relative; 
 
} 
 

 
.map-container:before { 
 
    display: block; 
 
    content: ''; 
 
    padding-top: 100%; 
 
} 
 

 
#map { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: tomato; /* only for testing */ 
 
}

<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet"/> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 

 
<md-card flex> 
 
    <md-card-content> 
 
     <div layout="column"> 
 
      <md-input-container flex="100">input</md-input-container> 
 
      <!-- ... --> 
 
      <div class="map-container"> 
 
       <div id="map"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </md-card-content> 
 
</md-card>