埋め込まれたGoogleマップの一番下の空白

Question

私はCSSに新しいので、応答性の高い埋め込みGoogleマップを作成するためにこのコードをコピーしましたが、ページの下部に「max-height "以前はなかった財産。

/* Flexible iFrame (for google maps)*/ 

.Flexible-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.Flexible-container iframe, 
.Flexible-container object, 
.Flexible-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    max-height: 500px; 
} 

Answer 1

パディングボトム：56.25％;あなたのCSS

Answer 2

から私はインラインフレームembbedに直接次のスタイルのコードを追加し、この問題を修正：

display: block; 

私は、あまりにも画面を正しく満たし、CSSクラスを使用してそれを適用します。反応的な行動はOKだった。

希望すると助かります！