Rumah > hujung hadapan web > tutorial css > Mengapa Peta Google Saya Tidak Muncul Apabila Saya Tetapkan Div Bekas kepada 100% Lebar dan Tinggi?

Mengapa Peta Google Saya Tidak Muncul Apabila Saya Tetapkan Div Bekas kepada 100% Lebar dan Tinggi?

Susan Sarandon
Lepaskan: 2024-10-26 08:01:30
asal
443 orang telah melayarinya

Why Does My Google Map Not Appear When I Set the Container Div to 100% Width and Height?

Menyelesaikan Isu Saiz DIV Kontena Peta Google dengan Dimensi 100%

Apabila membenamkan Peta Google ke dalam halaman web, ia mungkin mencabar untuk mencapai DIV kontena yang menduduki sepenuhnya ruang yang ada. Isu ini timbul apabila pengguna cuba menetapkan kedua-dua sifat lebar dan tinggi DIV bekas kepada 100%, menghasilkan peta yang tidak kelihatan.

原因:

Untuk dipaparkan peta dalam DIV, Peta Google memerlukan jumlah ruang yang terhad. Menetapkan dimensi 100% mengarahkan DIV untuk mematuhi dimensi bekas induknya. Jika bekas induk itu sendiri tidak ditetapkan secara eksplisit untuk menduduki keseluruhan halaman, DIV akan dikecilkan kepada saiz yang lebih kecil, menjadikan peta tidak kelihatan.

解决方案:

Untuk menyelesaikan masalah ini, adalah perlu untuk mewujudkan rangkaian bekas induk yang semuanya mempunyai lebar 100%. Ini memastikan bahawa bekas DIV untuk peta mempunyai ruang yang mencukupi untuk mengembangkan dan memaparkan kandungannya sepenuhnya. Selain itu, tetapkan nilai berangka (cth., 700px) pada sifat ketinggian DIV bekas peta untuk memberikan ketinggian minimum untuk peta.

示例代码:

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

div#content {
  width: 100%;
  height: 100vh;
}

div#map_canvas {
  height: 700px;
  width: 100%;
}</code>
Salin selepas log masuk

Dengan menetapkan badan, html dan DIV kandungan kepada 100% lebar dan tinggi, anda membuat bekas yang meliputi keseluruhan halaman. DIV map_canvas kemudiannya mengisi DIV kandungan sambil mengekalkan ketinggian 700px. Pendekatan ini memastikan peta sentiasa kelihatan dan menempati ruang yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Peta Google Saya Tidak Muncul Apabila Saya Tetapkan Div Bekas kepada 100% Lebar dan Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan