Titel umgeschrieben als: Der 100vh-Wert von CSS3 ist in mobilen Browsern nicht festgelegt

Question

Ich habe ein sehr seltsames Problem ... Dieses Verhalten tritt in jedem Browser und jeder mobilen Version auf, auf die ich stoße:

• Wenn eine Seite geladen wird, verfügen alle Browser über ein oberes Menü (z. B. mit der Adressleiste), das nach oben gleitet, wenn Sie mit dem Scrollen beginnen.
• Manchmal werden 100 Vh nur für den sichtbaren Teil des Ansichtsfensters berechnet. Wenn also die Browserleiste nach oben verschoben wird, erhöht sich der Wert um 100 Vh (in Pixel)
• Alle Layouts werden neu gezeichnet und in der Größe geändert, da sich die Abmessungen geändert haben
• Nicht gut für die Benutzererfahrung

Wie vermeide ich dieses Problem? Als ich zum ersten Mal von der Höhe des Ansichtsfensters hörte, war ich begeistert und dachte, ich könnte sie anstelle von JavaScript verwenden, um eine feste Höhe für Blöcke festzulegen. Aber jetzt denke ich, dass die einzige Möglichkeit tatsächlich darin besteht, JavaScript und einige Größenänderungsereignisse zu verwenden ...< /p>

Sie können das Problem hier sehen: Beispielseite

Kann mir jemand bei der Lösung dieses Problems helfen/eine CSS-Lösung bereitstellen?

---

Einfacher Testcode:

/* Vielleicht kann ich nachverfolgen, wann das Problem auftritt... */
$(Funktion(){
  Var-Größe geändert = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0;

/*
  Dies ist eine Box, die die gleiche Höhe behalten sollte ...
  Verwenden Sie „min-height“, um zu ermöglichen, dass der Inhalt die Höhe des Ansichtsfensters überschreitet, wenn zu viel Text vorhanden ist
*/
.vhbox{
  Mindesthöhe: 100 Vh;
  Position:relativ;
}

.vhbox .t{
  Anzeige:Tabelle;
  Position:relativ;
  Breite: 100 %;
  Höhe: 100 VH;
}

.vhbox .c{
  Höhe: 100 %;
  display:table-cell;
  vertikal ausrichten:mitte;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  Die Höhe dieses Divs sollte 100 % des Ansichtsfensters betragen und diese Höhe beim Scrollen der Seite beibehalten
    <br>
    <!-- Wenn das Größenänderungsereignis ausgelöst wird, wird dieses Eingabefeld hervorgehoben -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  Die Höhe dieses Divs sollte 100 % des Ansichtsfensters betragen und diese Höhe beim Scrollen der Seite beibehalten
  </div></div>
</div>

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

Answer 1

你可以尝试在你的css中使用min-height: -webkit-fill-available;而不是100vh。这应该可以解决问题

Answer 2

不幸的是，这是故意的...

这是一个众所周知的问题（至少在Safari移动版中），这是故意的，因为它可以防止其他问题。 Benjamin Poulain回复了一个webkit bug：

Nicolas Hoizey对此进行了相当多的研究：https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

没有计划修复

目前，除了在移动设备上避免使用视口高度之外，你没有太多可以做的。Chrome在2016年也进行了更改：

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