Tajuk ditulis semula sebagai: Nilai 100vh CSS3 tidak tetap dalam penyemak imbas mudah alih
<p>Saya mempunyai masalah yang sangat pelik... Saya mendapat kelakuan ini dalam setiap penyemak imbas dan versi mudah alih yang saya temui: </p>
<ul>
<li>Apabila halaman dimuatkan, semua penyemak imbas mempunyai menu teratas (cth. menunjukkan bar alamat) yang meluncur ke atas apabila anda mula menatal. </li>
<li>Kadangkala, 100vh hanya dikira pada bahagian yang boleh dilihat pada port pandangan, jadi apabila bar penyemak imbas meluncur ke atas, 100vh meningkat (dalam piksel)</li>
<li>Semua reka letak akan dilukis semula dan diubah saiz kerana dimensi telah berubah</li>
<li>Tidak bagus untuk pengalaman pengguna</li>
</ul>
<p>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>
<p>Anda boleh melihat masalahnya di sini: Tapak Contoh</p>
<p>Bolehkah sesiapa membantu saya menyelesaikan ini/menyediakan penyelesaian CSS? </p>
<hr />
<p>Kod ujian mudah:</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">/* 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();
})</pre>
<pre class="brush:css;toolbar:false;">*{ 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;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="vhbox" style="background-color:#c00">
<div class="t"><div class="c">
Ketinggian div ini hendaklah 100% daripada port pandangan dan mengekalkan ketinggian ini apabila menatal halaman
<br>
<!-- Jika peristiwa ubah saiz dicetuskan, kotak input ini akan diserlahkan -->
<input type="text" id="currenth">
</div></div>
</div>
<div class="vhbox" style="background-color:#0c0">
<div class="t"><div class="c">
Ketinggian div ini hendaklah 100% daripada port pandangan dan mengekalkan ketinggian ini apabila menatal halaman
</div></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></pre>
<p><br /></p>
