Saya mempunyai masalah yang sangat pelik... Saya mendapat kelakuan ini dalam setiap penyemak imbas dan versi mudah alih yang saya temui:

• Apabila halaman dimuatkan, semua penyemak imbas mempunyai menu teratas (cth. menunjukkan bar alamat) yang meluncur ke atas apabila anda mula menatal.
• Kadangkala, 100vh hanya dikira pada bahagian yang boleh dilihat pada port pandangan, jadi apabila bar penyemak imbas meluncur ke atas, 100vh meningkat (dalam piksel)
• Semua reka letak akan dilukis semula dan diubah saiz kerana dimensi telah berubah
• Tidak bagus untuk pengalaman pengguna

Bagaimana untuk mengelakkan masalah ini? Apabila saya mula-mula mendengar tentang ketinggian viewport, saya teruja, saya fikir saya boleh menggunakannya dan bukannya menggunakan JavaScript untuk menetapkan ketinggian tetap untuk blok, tetapi sekarang saya fikir satu-satunya cara sebenarnya ialah menggunakan JavaScript dan beberapa saiz semula Acara...< /p>

Anda boleh melihat masalahnya di sini: Tapak Contoh

Bolehkah sesiapa membantu saya menyelesaikan ini/menyediakan penyelesaian CSS?

Kod ujian mudah:

/* Mungkin saya boleh menjejaki bila masalah itu berlaku... */ $(fungsi(){ saiz var = -1; $(window).resize(function(){ $('#currenth').val( $('.vhbox').eq(1).height() ); jika (++saiz semula) $('#currenth').css('background:#00c'); }) .resize(); })

*{ margin:0; /* Ini adalah kotak yang sepatutnya kekal pada ketinggian yang sama... Gunakan ketinggian min untuk membenarkan kandungan melebihi ketinggian port pandangan jika terdapat terlalu banyak teks */ .vhbox{ ketinggian min: 100vj; jawatan:saudara; } .vhbox .t{ paparan:meja; jawatan:saudara; lebar: 100%; ketinggian: 100vh; } .vhbox .c{ ketinggian:100%; paparan:table-cell; vertical-align:middle; text-align:center; }

 
 Ketinggian div ini hendaklah 100% daripada port pandangan dan mengekalkan ketinggian ini apabila menatal halaman 
   
 
 
 
 Ketinggian div ini hendaklah 100% daripada port pandangan dan mengekalkan ketinggian ini apabila menatal halaman