Saya memiliki masalah yang sangat aneh ... di setiap browser dan versi seluler yang saya temui perilaku ini:

• semua browser memiliki menu teratas ketika Anda memuat halaman (menunjukkan bilah alamat misalnya) yang meluncur ke atas ketika Anda mulai menggulir halaman.
• 100vh kadang - kadang dihitung hanya pada bagian yang terlihat dari viewport, jadi ketika bilah browser geser ke atas 100vh meningkat (dalam hal piksel)
• semua tata letak ulang cat dan sesuaikan kembali karena dimensi telah berubah
• efek gelisah yang buruk untuk pengalaman pengguna

Bagaimana bisa menghindari masalah ini? Ketika saya pertama kali mendengar tentang viewport-height saya sangat senang dan saya pikir saya bisa menggunakannya untuk blok ketinggian tetap daripada menggunakan javascript, tapi sekarang saya pikir satu-satunya cara untuk melakukan itu sebenarnya javascript dengan beberapa acara ukuran ...

Anda dapat melihat masalahnya di: situs sampel

Adakah yang bisa membantu saya dengan / menyarankan solusi CSS?

kode tes sederhana:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Sayangnya ini disengaja ...

Ini adalah masalah yang diketahui (setidaknya dalam safari mobile), yang disengaja, karena mencegah masalah lain. Benjamin Poulain membalas bug webkit :

Ini sepenuhnya disengaja. Kami membutuhkan sedikit usaha untuk mencapai efek ini. :)

Masalah dasarnya adalah ini: area yang terlihat berubah secara dinamis saat Anda menggulir. Jika kami memperbarui tinggi viewport CSS sesuai, kami perlu memperbarui tata letak selama gulir. Tidak hanya itu terlihat seperti omong kosong, tetapi melakukan hal itu pada 60 FPS secara praktis tidak mungkin dilakukan di sebagian besar halaman (60 FPS adalah framerate dasar pada iOS).

Sulit untuk menunjukkan kepada Anda bagian "mirip kotoran", tetapi bayangkan ketika Anda menggulir, konten bergerak dan apa yang Anda inginkan di layar terus bergeser.

Memperbarui ketinggian secara dinamis tidak berfungsi, kami memiliki beberapa pilihan: jatuhkan unit viewport di iOS, cocokkan dengan ukuran dokumen seperti sebelum iOS 8, gunakan ukuran tampilan kecil, gunakan ukuran tampilan besar.

Dari data yang kami miliki, menggunakan ukuran tampilan yang lebih besar adalah kompromi terbaik. Sebagian besar situs web menggunakan unit viewport tampak hebat sebagian besar waktu.

Nicolas Hoizey telah meneliti ini sedikit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

Tidak ada perbaikan yang direncanakan

Pada titik ini, tidak banyak yang dapat Anda lakukan kecuali menahan diri dari menggunakan ketinggian viewport pada perangkat seluler. Chrome juga berubah menjadi ini di 2016:

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing

Anda dapat mencoba min-height: -webkit-fill-available;di css bukan 100vh. Itu harus dipecahkan

dalam aplikasi saya, saya melakukannya seperti itu (naskah dan kode pos bersarang, jadi ubah kode sesuai):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

di css Anda:

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

ini berfungsi setidaknya pada ponsel chrome dan ipad. Yang tidak berfungsi adalah ketika Anda menambahkan aplikasi ke homescreen di iOS dan mengubah orientasi beberapa kali - entah bagaimana tingkat zoom mengacaukan nilai innerHeight, saya mungkin memposting pembaruan jika saya menemukan solusi untuk itu.

Demo

Untuk banyak situs yang saya bangun, klien akan meminta spanduk 100vh dan seperti yang Anda temukan, itu menghasilkan pengalaman "gelisah" yang buruk di ponsel saat Anda mulai menggulir. Inilah cara saya memecahkan masalah untuk pengalaman konsisten yang mulus di semua perangkat:

Saya pertama-tama mengatur CSS elemen banner saya height:100vh

Lalu saya menggunakan jQuery untuk mendapatkan ketinggian dalam piksel elemen banner saya dan menerapkan gaya inline menggunakan ketinggian ini.

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

Melakukan hal ini memecahkan masalah pada perangkat seluler seperti ketika halaman dimuat, elemen spanduk diatur ke 100vh menggunakan CSS dan kemudian jQuery mengesampingkan ini dengan meletakkan CSS sebaris pada elemen spanduk saya yang menghentikannya mengubah ukuran ketika pengguna mulai menggulir.

Namun, pada desktop jika pengguna mengubah ukuran jendela browser mereka, elemen banner saya tidak akan mengubah ukuran karena sekarang memiliki ketinggian yang ditetapkan dalam piksel karena jQuery di atas. Untuk mengatasinya, saya menggunakan Deteksi Seluler untuk menambahkan kelas 'seluler' ke badan dokumen saya. Dan kemudian saya bungkus jQuery di atas dalam pernyataan if:

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

Akibatnya, jika pengguna menggunakan perangkat seluler, kelas 'seluler' ada di badan laman saya dan jQuery di atas dijalankan. Jadi elemen spanduk saya hanya akan menerapkan CSS sebaris di perangkat seluler sementara di desktop aturan CSS 100vh asli tetap berlaku.

Lihat jawaban ini: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Saya datang dengan komponen Bereaksi - memeriksanya jika Anda menggunakan Bereaksi atau menelusuri kode sumber jika Anda tidak, sehingga Anda dapat menyesuaikannya dengan lingkungan Anda.

Ini mengatur tinggi div layar penuh untuk window.innerHeightdan kemudian memperbaruinya pada ukuran jendela.

Ketika saya mencari solusi beberapa hari, inilah milik saya untuk semua orang yang menggunakan VueJS dengan Vuetify (solusi saya menggunakan v-app-bar, v-navigation-drawer dan v-footer): Saya membuat App.scss (digunakan di App. vue) dengan konten berikut:

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

Bagi saya trik seperti itu berhasil:

height: calc(100vh - calc(100vh - 100%))

@nils menjelaskannya dengan jelas.

Lalu apa selanjutnya?

Saya baru saja kembali menggunakan relatif 'klasik' %(persentase) di CSS.

Sering kali lebih banyak upaya untuk mengimplementasikan sesuatu daripada yang akan digunakan vh, tetapi setidaknya, Anda memiliki solusi yang cukup stabil yang bekerja di berbagai perangkat dan browser tanpa gangguan UI yang aneh.

Saya baru saja menemukan aplikasi web yang saya rancang memiliki masalah ini dengan iPhone dan iPad, dan menemukan artikel yang menyarankan untuk menyelesaikannya menggunakan kueri media yang ditargetkan pada perangkat Apple tertentu.

Saya tidak tahu apakah saya dapat membagikan kode dari artikel itu di sini, tetapi alamatnya adalah ini: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

Mengutip artikel: "hanya cocokkan tinggi elemen dengan tinggi perangkat menggunakan kueri media yang menargetkan versi iPhone dan iPad resolusi lama."

Mereka menambahkan hanya 6 permintaan media untuk mengadaptasi elemen ketinggian penuh, dan itu harus berfungsi karena sepenuhnya diterapkan CSS.

Sunting tertunda: Saya tidak dapat mengujinya sekarang, tetapi saya akan kembali dan melaporkan hasil saya.

Karena saya baru, saya tidak dapat mengomentari jawaban lain.

Jika seseorang mencari jawaban untuk membuat ini berfungsi (dan dapat menggunakan javascript - karena tampaknya diperlukan untuk membuat ini berfungsi saat ini) pendekatan ini telah bekerja cukup baik untuk saya dan itu juga bertanggung jawab atas perubahan orientasi seluler. Saya menggunakan Jquery untuk kode contoh tetapi harus bisa dilakukan dengan vanillaJS.

-Pertama, saya menggunakan skrip untuk mendeteksi apakah perangkat itu menyentuh atau membawa. Contoh tanpa tulang:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

Ini menambahkan kelas ke elemen tubuh sesuai dengan jenis perangkat (hover atau sentuh) yang dapat digunakan nanti untuk skrip ketinggian.

-Selanjutnya gunakan kode ini untuk mengatur ketinggian perangkat saat memuat dan perubahan orientasi:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-Timeout diatur sehingga perangkat akan menghitung ketinggian baru dengan benar pada perubahan orientasi. Jika tidak ada waktu habis, menurut pengalaman saya ketinggiannya tidak akan benar. 500 ms mungkin berlebihan tetapi telah bekerja untuk saya.

-100vh pada hover-devices adalah fallback jika browser menimpa CSS 100vh.

Kode berikut menyelesaikan masalah (dengan jQuery).

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

Dan elemen lainnya digunakan %sebagai unit untuk menggantikan vh.

Ini pekerjaan yang saya gunakan untuk aplikasi Bereaksi saya.

iPhone 11 Pro & iPhone Pro Max - 120px

iPhone 8 - 80px

max-height: calc(100vh - 120px);

Ini kompromi tetapi perbaikan yang relatif sederhana

Berikut ini bekerja untuk saya:

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

The bodyakan mengambil ketinggian viewport terlihat dan #your-app-containerdengan height: 100%akan membuat wadah mengambil ketinggian viewport terlihat.

Semoga, ini akan menjadi variabel lingkungan CSS yang terdefinisi UA seperti yang disarankan di sini: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

Karena itu tidak akan diperbaiki, Anda dapat melakukan sesuatu seperti:

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

Bagi saya itu adalah solusi tercepat dan lebih murni daripada bermain dengan JavaScript yang tidak dapat berfungsi pada banyak perangkat dan browser.

Cukup gunakan nilai yang tepat vhyang sesuai dengan kebutuhan Anda.

Menggunakan vh pada perangkat seluler tidak akan berfungsi dengan 100vh, karena pilihan desain mereka menggunakan seluruh ketinggian perangkat tidak termasuk bilah alamat dll.

Jika Anda mencari tata letak termasuk ketinggian div sebanding dengan ketinggian tampilan sebenarnya, saya menggunakan solusi css murni berikut:

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

Anda memiliki dua opsi untuk mengatur ketinggian viewport, secara manual mengatur --devHeight ke ketinggian yang berfungsi (tetapi Anda harus memasukkan nilai ini untuk setiap jenis perangkat yang Anda kodekan)

atau

Gunakan javascript untuk mendapatkan ketinggian jendela dan kemudian perbarui --devheight tentang memuat dan menyegarkan viewport (namun ini memang mengharuskan menggunakan javascript dan bukan solusi css murni)

Setelah Anda mendapatkan ketinggian tampilan yang benar, Anda dapat membuat beberapa div pada persentase yang tepat dari total tinggi viewport dengan hanya mengubah pengali di setiap div yang Anda tetapkan ketinggiannya.

0,10 = 10% tinggi tampilan 0,57 = 57% tinggi tampilan

Semoga ini bisa membantu seseorang;)

Anda dapat melakukan ini dengan menambahkan skrip dan gaya berikut

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }
  window.addEventListener('resize', appHeight);
  appHeight();

Gaya

.module {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Cobalah html, body { height: 100% }sesuatu dengan efek 100vh pada perangkat seluler.

Anda dapat mencoba memberikan position: fixed; top: 0; bottom: 0;properti ke wadah Anda.