Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann verhindert werden, dass Google Maps verschwindet, wenn es in einen 100 %-Container eingebettet wird?

Barbara Streisand
Freigeben: 2024-10-26 18:58:30
Original
229 Leute haben es durchsucht

How to Prevent Google Maps from Disappearing When Embedding it with a 100% Container?

Anpassen der Google Maps-Containerabmessungen für eine optimale Anzeige

Beim Einbetten von Google Maps in eine Webseite mit API v3 wird die Breite und Höhe des Container-DIV auf 100 % festgelegt. kann dazu führen, dass die Karte verschwindet. Um dieses Problem zu lösen, ist es wichtig, die Anforderungen für eine ordnungsgemäße Kartenwiedergabe zu verstehen.

Das Hauptproblem ergibt sich aus den widersprüchlichen Anforderungen, Breite und Höhe auf 100 % einzustellen und gleichzeitig automatische Ränder zu verwenden. Um eine 100-prozentige Abdeckung der Seite zu erreichen, ist es wichtig, die Breite und Höhe der übergeordneten Container auf 100 % einzustellen. Dadurch kann der Kartencontainer diese Werte erben und den gewünschten Platz belegen.

Zum Beispiel müssen Sie CSS-Regeln wie die folgenden hinzufügen, um sicherzustellen, dass die Elemente „body“, „HTML“ und „#content“ einen 100-prozentigen Wert haben. Breite und Höhe:

<code class="css">body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%;
  height: 100%;
}</code>
Nach dem Login kopieren

Durch Festlegen der Abmessungen der übergeordneten Container erstellen Sie ein festes Layout, bei dem der Kartencontainer die Breite und Höhe erben und so die Karte richtig anzeigen kann. Denken Sie daran, einen absoluten Wert für die Breite und Höhe des #content-Div festzulegen, um automatische Anpassungen basierend auf untergeordneten Elementen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Google Maps verschwindet, wenn es in einen 100 %-Container eingebettet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage