CSS3 100vh im mobilen Browser nicht konstant

285

Ich habe ein sehr merkwürdiges Problem ... in jedem Browser und jeder mobilen Version ist dieses Verhalten aufgetreten:

  • Alle Browser verfügen über ein Hauptmenü, wenn Sie die Seite laden (z. B. mit der Adressleiste), das beim Scrollen der Seite nach oben verschoben wird.
  • 100vh wird manchmal nur im sichtbaren Teil eines Ansichtsfensters berechnet. Wenn also die Browserleiste nach oben gleitet, erhöht sich 100vh (in Pixel).
  • Alle Layouts werden neu gestrichen und angepasst, da sich die Abmessungen geändert haben
  • Ein schlechter Jumpy-Effekt für die Benutzererfahrung

Wie kann dieses Problem vermieden werden? Als ich zum ersten Mal von der Höhe des Ansichtsfensters hörte, war ich aufgeregt und dachte, ich könnte es für Blöcke mit fester Höhe verwenden, anstatt Javascript zu verwenden, aber jetzt denke ich, dass der einzige Weg, dies zu tun, tatsächlich Javascript mit einem Größenänderungsereignis ist ...

Sie können das Problem unter folgender Adresse sehen: Beispielseite

Kann mir jemand bei einer CSS-Lösung helfen / diese vorschlagen?


einfacher Testcode:

Nereo Costacurta
quelle
1
Wenn ich die Frage gut verstanden habe, ist das Problem, mit dem Sie konfrontiert sind, im mobilen Browser, dass die Höhe mehr als die Höhe des sichtbaren Ansichtsfensters ist.
Gaurav Aggarwal
Interessant, habe das noch nie bemerkt. Es ist hauptsächlich das Hintergrundbild, das merklich nervös ist. Wie wäre es, wenn Sie ein transition: 0.5soder so hinzufügen , um die Änderung weniger abrupt zu machen?
C14L
@GauravAggarwal Nein, genau das Gegenteil: Die tatsächliche Höhe des Ansichtsfensters ist größer als die vom Browser bereitgestellte, wenn die Adressleiste sichtbar ist ...
Nereo Costacurta
1
Da meine Frage immer beliebter wird, möchte ich meine 5 Cent geben: Wäre es nicht intelligenter, die tatsächliche Fensterhöhe beizubehalten und nur die Menüleiste nach oben zu schieben? es scheint nicht so schwierig. In der Tat sollte es einfacher sein ... Finger nach oben -> Menüleiste nach oben schieben, bis sie unsichtbar ist, Finger nach unten -> Menüleiste nach unten schieben, bis sie vollständig sichtbar ist ... alles zusammen mit dem Körper ohne Neueinstellung und nervösen Effekt ...
Nereo Costacurta
4
Google hat einige gute Informationen dazu: developer.google.com/web/updates/2016/12/url-bar-resizing Sie können 100% anstelle von 100vh verwenden, wenn Sie die Körpergröße auf 100% geändert haben
Benisburger

Antworten:

203

Leider ist das beabsichtigt ...

Dies ist ein bekanntes Problem (zumindest bei Safari Mobile), das beabsichtigt ist, da es andere Probleme verhindert. Benjamin Poulain antwortete auf einen Webkit-Fehler :

Dies ist völlig beabsichtigt. Wir haben viel Arbeit geleistet, um diesen Effekt zu erzielen. :) :)

Das Grundproblem ist folgendes: Der sichtbare Bereich ändert sich dynamisch, wenn Sie scrollen. Wenn wir die Höhe des CSS-Ansichtsfensters entsprechend aktualisieren, müssen wir das Layout während des Bildlaufs aktualisieren. Nicht nur das sieht scheiße aus, sondern das mit 60 FPS ist auf den meisten Seiten praktisch unmöglich (60 FPS ist die Grundframerate unter iOS).

Es ist schwer, Ihnen den Teil „sieht aus wie Scheiße“ zu zeigen, aber stellen Sie sich vor, während Sie scrollen, bewegt sich der Inhalt und was Sie auf dem Bildschirm wollen, ändert sich ständig.

Das dynamische Aktualisieren der Höhe funktionierte nicht. Wir hatten einige Möglichkeiten: Ansichtsfenstereinheiten unter iOS löschen, Dokumentgröße wie vor iOS 8 anpassen, kleine Ansichtsgröße verwenden, große Ansichtsgröße verwenden.

Aus den Daten, die wir hatten, war die Verwendung der größeren Ansicht der beste Kompromiss. Die meisten Websites mit Ansichtsfenster-Einheiten sahen die meiste Zeit großartig aus.

Nicolas Hoizey hat dies ziemlich genau untersucht: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

Kein Fix geplant

Zu diesem Zeitpunkt können Sie nur die Höhe des Ansichtsfensters auf Mobilgeräten verwenden. Chrome hat dies auch 2016 geändert:

nils
quelle
7
Ja, wie ich denke. Die einzige praktikable Lösung ist eine Skriptlösung. Soweit ich weiß, $(window).height()ist dieser Fehler nicht betroffen, also gehe ich diesen Weg. Danke!
Nereo Costacurta
3
Das Skript war der einzige Weg für mich und funktionierte perfekt.
captDaylight
454
Die deprimierendste Antwort aller Zeiten.
Winnemucca
15
Seit Chrome Version 56 wird das vh immer so berechnet, als ob die URL-Leiste ausgeblendet wäre, und daher nimmt vh beim Scrollen nicht zu, außer für position:fixed. Dies ähnelt der Implementierung auf Safari. Lesen Sie mehr: developer.google.com/web/updates/2016/12/url-bar-resizing
Kevin Farrugia
4
Die neueste Chrome nicht ändert vhoder <html> 100%Höhe nach Anfangslast. Das ist wirklich großartig - da Layout-Thrashing / Reflow, wenn URL-Leisten versteckt sind, schrecklich aussehen kann. Firefoxund Edge Mobileimmer noch dynamisch aktualisieren vhund <html>Höhe, was zu viel Zerreißen und Ändern der Größe aller Komponenten beim Scrollen führt, besonders schlecht, wenn SVGs für Hintergrundbilder verwendet werden
Drenai
142

Sie können min-height: -webkit-fill-available;in Ihrem CSS statt versuchen 100vh. Es sollte gelöst werden

Saurabh Jain
quelle
20
Ich würde min-height: 100vh;als Fallback gehen, wo -webkit-fill-availablenicht unterstützt wird.
Tammy Tee
Wow Danke!! Damit brauche ich kein "react-div-100vh" mehr!
Andres Elizondo
1
die hilfreichste Antwort!
Gauthier
@TammyTee ist richtig, es ist besser, dort zu bleiben, min-height: 100vh;da es sonst in Browsern wie Firefox kaputt geht (zumindest auf dem Desktop verwendet iOS das Webkit, egal welcher Browser).
JoniVR
2
Dies war eine sehr schöne Lösung, scheint sich aber in iOS 13 geändert zu haben - ich sehe zusätzlichen Platz am Ende des ersten Abschnitts, aber es funktioniert genau wie gewünscht in Safari für iOS 12.x codepen.io/RwwL/pen / PowjvPq (Sie müssten dies abspalten und dann im CodePen-Debug-Modus unter iOS anzeigen, um wirklich zu sehen, was ich meine).
RwwL
27

In meiner App mache ich das so (Typoskript und verschachtelte Postcss, also ändere den Code entsprechend):

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

in deinem css:

: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);
    }
}

es funktioniert zumindest auf Chrome Mobile und iPad. Was nicht funktioniert, ist, wenn Sie Ihre App unter iOS zum Homescreen hinzufügen und die Ausrichtung einige Male ändern. Irgendwie beeinträchtigen die Zoomstufen den Wert von innerHeight. Ich kann ein Update veröffentlichen, wenn ich eine Lösung dafür finde.

Demo

Andreas Herde
quelle
2
Dies ist tatsächlich eine fantastische Herangehensweise an ein sehr ärgerliches Problem.
Michael Giovanni Pumo
1
Ich möchte eine Warnung hinzufügen, dass "@media not all and (hover: hover) {" keine kugelsichere Methode zum Erkennen mobiler Browser ist. Fühlen Sie sich frei, etwas anderes zu verwenden.
Andreas Herde
Ich mag diesen Ansatz sehr. Ein Kommentar, den ich machen möchte, betrifft die Verwendung des Ereignis-Listeners. Dies führt zu einem erneuten Malen der Seite und ich verwende sie nur in bestimmten Szenarien, wenn es für den Benutzer unbedingt erforderlich ist, das richtige Ansichtsfenster (dh die erste Ansicht der Startseite) zu sehen
Zach Gollwitzer
22

Für viele der Websites, die ich erstelle, wird der Client nach einem 100-VH-Banner fragen. Wie Sie festgestellt haben, führt dies zu einer schlechten "nervösen" Erfahrung auf Mobilgeräten, wenn Sie mit dem Scrollen beginnen. So löse ich das Problem für eine reibungslose, konsistente Erfahrung auf allen Geräten:

Ich habe zuerst mein Bannerelement CSS auf gesetzt height:100vh

Dann verwende ich jQuery, um die Höhe meines Bannerelements in Pixel zu ermitteln und mit dieser Höhe einen Inline-Stil anzuwenden.

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

Auf diese Weise wird das Problem auf Mobilgeräten behoben, da beim Laden der Seite das Bannerelement mithilfe von CSS auf 100 Vh gesetzt wird. JQuery überschreibt dies, indem Inline-CSS in mein Bannerelement eingefügt wird, wodurch die Größe geändert wird, wenn ein Benutzer mit dem Scrollen beginnt.

Wenn ein Benutzer auf dem Desktop die Größe seines Browserfensters ändert, wird die Größe meines Bannerelements jedoch nicht geändert, da aufgrund der obigen jQuery jetzt eine feste Höhe in Pixel festgelegt ist. Um dies zu beheben , verwende ich Mobile Detect , um dem Hauptteil meines Dokuments eine "mobile" Klasse hinzuzufügen. Und dann verpacke ich die obige jQuery in eine if-Anweisung:

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

Wenn sich ein Benutzer auf einem mobilen Gerät befindet, befindet sich die Klasse 'mobile' im Hauptteil meiner Seite und die obige jQuery wird ausgeführt. Mein Bannerelement erhält also nur das Inline-CSS, das auf Mobilgeräten angewendet wird, während auf dem Desktop die ursprüngliche 100-VH-CSS-Regel beibehalten wird.


quelle
4
Ich würde es optimieren, um es $('.banner').css({ height: window.innerHeight });stattdessen zu verwenden , was die "echte" Höhe des Ansichtsfensters ist. Beispiel, wie innerHeight funktioniert
Martin
8
Welches ist document.querySelector('.banner').style.height = window.innerHeight;für Leute, die tatsächlich JavaScript schreiben.
Fabian von Ellerts
18

Schauen Sie sich diese Antwort an: 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>

manuel-84
quelle
2
clevere Lösung, ich hatte Probleme mit der Höhe des Ansichtsfensters auf Mobilgeräten. Dies sollte auch als Lösung akzeptiert werden (speziell für Mobilgeräte)
Julio Vedovatto
sehr schöne Lösung. Nur in meinem Fall habe ich nicht Ponyfill verwendet, sondern die Logik, dass ich für alle Desktop-Sites 100vh verwende, während ich für Mobilgeräte var verwende (wir haben IE11 in der Mobilwelt nicht).
FrEaKmAn
Einzige Lösung, die für verschachtelte Elemente funktioniert hat. Wenn jemand anderes ein paar hundert Instanzen ersetzen muss, können Sie (zumindest die meiste Zeit) mit dem regulären Ausdruck (-)? ([\ D.] +) Vh übereinstimmen und ihn durch calc (var (- vh) * ersetzen $ 1 $ 2)
ecc521
10

Ich habe eine React-Komponente entwickelt. Überprüfen Sie, ob Sie React verwenden, oder durchsuchen Sie den Quellcode, wenn Sie dies nicht tun, damit Sie ihn an Ihre Umgebung anpassen können.

Es setzt die Höhe des Vollbild-Divs auf window.innerHeightund aktualisiert sie dann bei Fenstergrößenänderung.

Mikhail Vasin
quelle
3
Nicht alle Helden tragen Mützen. Dir geht es zB gut. Vielen Dank. Stunden gespart.
NarayaN
Und für Vue-Liebhaber ... github.com/razumnyak/vue-div-100vh
Tony O'Hagan
6

Da ich einige Tage nach einer Lösung gesucht habe, ist meine für alle, die VueJS mit Vuetify verwenden (meine Lösung verwendet V-App-Leiste, V-Navigations-Schublade und V-Fußzeile): Ich habe App.scss erstellt (in App verwendet). vue) mit folgendem Inhalt:

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

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

Jürgen P.
quelle
1
Dies funktioniert gut und kann außerhalb der Vue / Vuetify-Welt verallgemeinert werden.
Leo
5

Für mich hat ein solcher Trick einen Job gemacht:

height: calc(100vh - calc(100vh - 100%))
Patryk Janik
quelle
Ist es anders als Höhe: 100%?
FF_Dev
Ja, 100vh entspricht 100% der Höhe eines Ansichtsfensters (Ihres Geräts), wenn 100% nur den gesamten verfügbaren übergeordneten Bereich ausfüllen (der übergeordnete Block kann z. B. eine Höhe von 50 Pixel haben und wird nur bis zu dieser übergeordneten Höhe ausgefüllt). Kurz gesagt.
Patryk Janik
4

@nils erklärte es klar.

Was kommt dann als nächstes?

Ich bin gerade zurückgegangen, um den relativen "Klassiker" %(Prozentsatz) zu verwenden. in CSS zu verwenden.

Es ist oft mehr Aufwand, etwas zu implementieren, als es verwenden würde vh, aber zumindest haben Sie eine ziemlich stabile Lösung, die auf verschiedenen Geräten und Browsern ohne seltsame Probleme mit der Benutzeroberfläche funktioniert.

klimat
quelle
1
Die Höhe: 100% für Banner springt immer noch auf mobilen Browsern. Ich habe es auf Android getestet und bisher geben Chrome und Opera Mini 100% als sichtbare VP-Höhe an und ändern sich beim Scrollen nicht. Edge und Firefox ändern die Höhe von 100% und malen die Ansicht neu. Firefox ist besonders schlecht, mit Zerreißen, Text neu gerendert, ganz offensichtlich neu gestaltet
Drenai
1
@Drenai Bist du sicher, dass du das richtig implementierst? Können Sie das an einem kleinen Beispiel auf jsfiddle.net oder so beweisen?
klimat
Ja, ich bin sicher :-)
Drenai
3

Ich habe gerade eine Web-App gefunden, die dieses Problem mit iPhones und iPads hat, und einen Artikel gefunden, in dem vorgeschlagen wird, das Problem mithilfe von Medienabfragen zu lösen, die auf bestimmte Apple-Geräte abzielen.

Ich weiß nicht, ob ich den Code aus diesem Artikel hier freigeben kann, aber die Adresse lautet: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

Zitat des Artikels: "Passen Sie einfach die Elementhöhe mit der Gerätehöhe an, indem Sie Medienabfragen verwenden, die auf ältere Versionen der iPhone- und iPad-Auflösung abzielen."

Sie haben nur 6 Medienabfragen hinzugefügt, um Elemente mit voller Höhe anzupassen, und es sollte funktionieren, da es vollständig CSS-implementiert ist.

Bearbeiten ausstehend: Ich kann es derzeit nicht testen, aber ich werde zurückkommen und meine Ergebnisse melden.

Jahaziel
quelle
23
Ich
warte
2
Es tut mir leid, dass ich nicht wie versprochen zurückgekommen bin. Aber nachdem ich viel länger als gewünscht mit HTML und CSS herumgespielt hatte, änderte ich das Design meines Layouts und fand einen Weg, der für meine Bedürfnisse "ok" funktionierte, aber keine universelle Lösung war.
Jahaziel
2

Da ich neu bin, kann ich keine anderen Antworten kommentieren.

Wenn jemand nach einer Antwort sucht, damit dies funktioniert (und Javascript verwenden kann - da dies derzeit erforderlich zu sein scheint), hat dieser Ansatz für mich ziemlich gut funktioniert und auch die Änderung der mobilen Ausrichtung berücksichtigt. Ich verwende Jquery für den Beispielcode, sollte aber mit vanillaJS machbar sein.

- Zuerst benutze ich ein Skript, um festzustellen, ob das Gerät berührt oder schwebt. Beispiel mit bloßen Knochen:

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

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

Dadurch wird dem Body-Element eine Klasse entsprechend dem Gerätetyp (Hover oder Touch) hinzugefügt, der später für das Höhenskript verwendet werden kann.

- Verwenden Sie diesen Code als Nächstes, um die Höhe des Geräts beim Laden und beim Ändern der Ausrichtung festzulegen:

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");


}

-Zeitüberschreitung ist so eingestellt, dass das Gerät die neue Höhe bei einer Orientierungsänderung korrekt berechnet. Wenn es keine Zeitüberschreitung gibt, ist die Höhe meiner Erfahrung nach nicht korrekt. 500ms sind vielleicht übertrieben, haben aber für mich funktioniert.

-100vh auf Hover-Geräten ist ein Fallback, wenn der Browser das CSS 100vh überschreibt.

tjgoodman
quelle
2
Touchstart wird nicht in allen Browsern unterstützt, und einige nicht mobile Geräte haben es developer.mozilla.org/en-US/docs/Web/Events/touchstart
Drenai
@Drenai Touchstart wird von den meisten mobilen Browsern unterstützt. Auf dem Desktop ist die Unterstützung etwas geringer, IE, Opera und Safari unterstützen sie nicht. Die ursprüngliche Frage richtet sich jedoch an Mobilgeräte und nicht an Desktops. Das macht dies zu einer gültigen Antwort.
Paul
Danke für die Kommentare! Ich habe diese Taktik hauptsächlich verwendet, um die Neueinstellung und Unruhe des Bildschirms in einigen mobilen Browsern zu überwinden. Wenn der Browser Touchstart nicht unterstützt, ist der Fallback das CSS 100vh. Wenn 100vh nicht unterstützt wird, ist dies ein anderes Thema. Wenn das Desktop-Gerät Touch-Unterstützung bietet, wird die Höhe mit Javascript berechnet. Wir verlieren dann die Neuberechnung der Größenänderung, die 100vh bietet, aber dies ist im Allgemeinen kein schwerwiegendes Problem, da auf dem Desktop keine Änderungen der Ausrichtung vorgenommen werden.
Tjgoodman
Die Höhenberechnung könnte auch angehängt werden, um die Größe des Ereignisses zu ändern. Dann können wir jedoch auf das gleiche Problem der Neueinstellung und der Unruhe auf Mobilgeräten stoßen. Daher habe ich diese Taktik als praktisch empfunden.
Tjgoodman
1
@Paul Wenn Chrome- und Firefox-Desktop-Browser über Touchstart verfügen, ist dies sicherlich die falsche Funktion zum Erkennen eines mobilen Browsers? Ich habe es gerade in Chrome und Firefox unter Windows getestet und beide haben diesen Test bestanden
Drenai
2

Der folgende Code löste das Problem (mit jQuery).

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

Und die anderen Elemente werden %als Einheit zum Ersetzen verwendet vh.

Ray1422
quelle
2

Hier ist eine Problemumgehung, die ich für meine React-App verwendet habe.

iPhone 11 Pro und iPhone Pro Max - 120px

iPhone 8 - 80px

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

Es ist ein Kompromiss, aber eine relativ einfache Lösung

Trevor Wood
quelle
1

Folgendes hat bei mir funktioniert:

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%;
}

Das bodynimmt die sichtbare Höhe des Ansichtsfensters an und #your-app-containermit height: 100%wird dieser Container die sichtbare Höhe des Ansichtsfensters annehmen.

Rico Kahler
quelle
0

Da dies nicht behoben werden kann, können Sie Folgendes tun:

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

# css
.content {
  height: 80vh;
}

Für mich war es die schnellste und reinste Lösung als das Spielen mit JavaScript, das auf vielen Geräten und Browsern nicht funktionieren konnte.

Verwenden Sie einfach den richtigen Wert, der vhIhren Anforderungen entspricht.

türkus
quelle
0

Die Verwendung von vh auf Mobilgeräten funktioniert nicht mit 100vh, da das Design die gesamte Höhe des Geräts ohne Adressleisten usw. verwendet.

Wenn Sie nach einem Layout mit Div-Höhen suchen, die proportional zur tatsächlichen Ansichtshöhe sind, verwende ich die folgende reine CSS-Lösung:

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

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

Sie haben zwei Möglichkeiten, um die Höhe des Ansichtsfensters festzulegen. Stellen Sie --devHeight manuell auf eine Höhe ein, die funktioniert (Sie müssen diesen Wert jedoch für jeden Gerätetyp eingeben, für den Sie codieren).

oder

Verwenden Sie Javascript, um die Fensterhöhe zu ermitteln, und aktualisieren Sie dann --devheight beim Laden und Aktualisieren des Ansichtsfensters (dies erfordert jedoch die Verwendung von Javascript und ist keine reine CSS-Lösung).

Sobald Sie Ihre korrekte Ansichtshöhe erhalten haben, können Sie mehrere Divs mit einem genauen Prozentsatz der gesamten Ansichtsfensterhöhe erstellen, indem Sie einfach den Multiplikator in jedem Div ändern, dem Sie die Höhe zuweisen.

0,10 = 10% der Ansichtshöhe 0,57 = 57% der Ansichtshöhe

Hoffe das könnte jemandem helfen;)

Ray Andison
quelle
1
Das ist eine schöne Lösung. Mehr dazu lesen Sie in diesem Artikel über CSS-Tricks .
Amaury Hanser
0

Sie können dies tun, indem Sie das folgende Skript und den folgenden Stil hinzufügen

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

Stil

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

Versuchen Sie es html, body { height: 100% }mit etwas, das 100vh auf Mobilgeräten bewirkt.

Sam Bokai
quelle
-1

Sie können versuchen, position: fixed; top: 0; bottom: 0;Ihrem Container Eigenschaften zuzuweisen.

Hasan upinion
quelle
2
Fügen Sie weitere Informationen hinzu, warum dies eine Antwort auf die Frage ist.
Infizierter Drake