ホームページ >ウェブフロントエンド >CSSチュートリアル >コンテナの Div を幅と高さ 100% に設定すると Google マップが表示されないのはなぜですか?
100% のサイズで Google マップ コンテナの DIV サイズ設定の問題を解決する
Google マップを Web ページに埋め込む場合、次のことが難しい場合があります。利用可能なスペースを完全に占有するコンテナ DIV を実現します。この問題は、ユーザーがコンテナ DIV の幅と高さの両方のプロパティを 100% に設定しようとした場合に発生し、マップが非表示になります。
原因:
表示するにはDIV 内の地図の場合、Google マップには有限のスペースが必要です。 100% のディメンションを割り当てると、DIV は親コンテナのディメンションに準拠するように指示されます。親コンテナ自体がページ全体を占めるように明示的に設定されていない場合、DIV はより小さいサイズに縮小され、マップが非表示になります。
解决方案:
この問題を解決するには、すべての幅が 100% である親コンテナのチェーンを確立する必要があります。これにより、マップのコンテナ DIV に、その内容を展開して完全に表示するのに十分なスペースが確保されます。さらに、マップの最小の高さを提供するために、マップのコンテナ DIV の高さプロパティに数値 (例: 700px) を割り当てます。
例代:
<code class="css">body, html { height: 100%; width: 100%; } div#content { width: 100%; height: 100vh; } div#map_canvas { height: 700px; width: 100%; }</code>
本文、HTML、およびコンテンツの DIV を幅と高さ 100% に設定すると、ページ全体をカバーするコンテナが作成されます。次に、map_canvas DIV が 700px の高さを維持しながらコンテンツ DIV を埋めます。このアプローチにより、マップが常に表示され、意図したスペースを占めることが保証されます。
以上がコンテナの Div を幅と高さ 100% に設定すると Google マップが表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。