100 vh Höhe, wenn die Adressleiste angezeigt wird – Chrome Mobile

Lesezeit: 7 Minuten

Benutzer-Avatar
Tobias Klaus

Ich bin ein paar Mal auf dieses Problem gestoßen und habe mich gefragt, ob es eine Lösung für dieses Problem gibt. Mein Problem tritt in der Chrome Mobile App auf. Dort können Sie etwas nach unten scrollen und die Adressleiste verschwindet. So weit, so gut, machen wir ein Beispiel:
Die des Containers height ist eingestellt auf 100vh.

So sieht es mit der Adressleiste aus

Wie Sie sehen können, wird der untere Teil abgeschnitten.

Wenn ich nach unten scrolle, sieht es so aus:

Geben Sie hier die Bildbeschreibung ein

Jetzt sieht es gut aus. Offensichtlich berechnet Chrome die Höhe der Adressleiste in die Höhe des Ansichtsfensters. Also meine Frage ist:

Gibt es eine Möglichkeit, dass es mit oder ohne Adressleiste gleich aussieht? Damit sich der Behälter ausdehnt oder so?

  • Nur eine Skript-Lösung könnte dies beheben. Lesen Sie hier: stackoverflow.com/questions/37112218/…

    – ArayniMax

    17. Oktober 2018 um 7:01 Uhr

  • ohne code wird es schwierig dir zu helfen..

    – Aflyzer

    17. Oktober 2018 um 7:35 Uhr

  • Warum verwendest du nicht height:100% statt 100vh? Die Chrome-App gibt den Wert inklusive Adressleiste der Höhe 100vh zurück.

    – Andreas Li

    28. März 2019 um 9:50 Uhr

  • @AndrewLi Wie Sie sehen können, gibt es eine Liste. Bei 100 % wäre der Container nicht in voller Höhe. Ich müsste 100vh auf die Körpergröße einstellen, damit es dann funktioniert, was zu demselben Problem führte.

    – Tobias Klaus

    28. März 2019 um 10:02 Uhr

  • Ich habe das gleiche Problem, aber das Festlegen der Höhe auf 100% behebt es nicht.

    – David Minaya

    15. Mai 2020 um 14:26 Uhr

Diesbezüglich offizieller Artikel im Chrome-Webist die richtige Methode zum Festlegen der Höhe zum Ausfüllen des sichtbaren Ansichtsfensters mit height: 100%entweder auf der <html> Element oder auf a position: fixed Element. Wie das Dokument beschreibt, stellt dies die Kompatibilität mit mobilem Safari sicher und ist unabhängig davon, wie groß die URL-Leiste ist.

  • Vielen Dank. Dieser Artikel hat mir tatsächlich geholfen zu verstehen, was hinter den Kulissen passiert. Für meinen Anwendungsfall schien also 100% richtig zu sein, denn es war a position: fixed Element sowieso.

    – Swashata Ghosh

    6. Januar 2020 um 15:30 Uhr

  • Es ist wichtig zu beachten, dass, wenn Sie das Scrollen und Umschalten der Sichtbarkeit der Adressleiste weiterhin erleichtern möchten, die Höhe der <html> sollte noch eingestellt sein 100vh (oder etwas größer als 100%) und nur das Zielfüllelement sollte zugewiesen werden position: fixed; height: 100%.

    – Klobiger Brocken

    10. Februar 2020 um 23:45 Uhr

  • Ich habe das gleiche Problem, aber das Festlegen der Höhe auf 100% behebt es nicht.

    – David Minaya

    15. Mai 2020 um 13:59 Uhr

  • Die einzige Antwort, die wirklich für mich funktioniert. Vielen Dank.

    – Hunja

    2. März 2021 um 11:27 Uhr

Versuchen Sie es mit min-height: -webkit-fill-available. Sie können es auch unten hinzufügen height: 100vh als Rückfall.

  • Ich habe Jahre gebraucht, um das zu finden!

    – Sam Holguin

    15. April 2021 um 3:41 Uhr

  • Da ich 100vh mit einem Scroll-Container verwenden musste, habe ich diese proprietäre Webkit-Variable tatsächlich in einem anderen Anwendungsfall mit verwendet max-height.

    – Florian Topf

    27. November 2021 um 16:47 Uhr

Die Community hat immer noch keine strikte Einigung darüber, wie sich Browser aus Sicht der Entwickler bei der Bewegung von oberen, unteren und seitlichen Bedienfeldern verhalten sollen.

Das angesprochene Problem in der Frage ist bekannt:

Geben Sie hier die Bildbeschreibung ein

  1. Angefangen hat alles mit der Apple Webkit-Problem. Eines der Probleme war, dass Website-Entwickler verwendet wurden vh zur Berechnung der Schriftgröße (calc(100 / vh * irgendwas)). Wenn 100vh dynamisch wäre, wenn ein Benutzer nach unten scrollt und die Adressleiste ausgeblendet ist, wird die Schriftgröße wie alle anderen gebundenen Elemente verzerrt, was zu einer sehr schlechten Benutzererfahrung führt, ganz zu schweigen von einer CPU/GPU-intensiven Aufgabe.
    Apple-Entscheidung war um die Größe des Bildschirms (ohne Adressleiste) konstant auf 100vh anzupassen. Also, wenn die Adressleiste angezeigt wird und Sie verwenden 100vh Höhe wird der untere Teil aus dem Bildschirm verschwinden. Viele Entwickler sind mit dieser Entscheidung nicht einverstanden und betrachten Ansichtsfenstereinheiten als dynamisch und genau gleich dem sichtbaren “Ansichtsfenster”.

  2. Das Google Chrome-Team hat sich dafür entschieden kompatibel mit dem Apple-Browser und bleibe bei der gleichen Entscheidung.

  3. height: 100% in den meisten modernen Browsern gleich dem wirklich sichtbaren Teil, dh die Höhe variiert und hängt davon ab, ob die Adressleiste beim Scrollen sichtbar oder ausgeblendet ist.

  4. Balken können nicht nur oben, sondern auch unten (modernes iOS) auf dem Bildschirm erscheinen, und eine Bildschirmtastatur kann die Ansicht verkürzen. Da ist ein schöne demo um bei Mobilgeräten die tatsächliche Größe zu überprüfen 100vh vs 100%.
    Geben Sie hier die Bildbeschreibung ein


Lösung 1

html, body { height: 100%; }
.footer-element { 
  position: fixed; 
  bottom: 10px;
}

Lösung 2

Kompensieren Sie eine gewisse Abhängigkeit von der vh Wenn die sichtbare Balkenhöhe gleich “100vh – 100%” ist, ist die Differenz 0, wenn der Balken ausgeblendet ist.

html, body { height: 100vh; }
.footer-element { 
  position: fixed; 
  bottom: calc(10px + (100vh - 100%));
}

Sie können das Problem mit der Adressleiste beheben, indem Sie die Höhe einstellen: 100% auf HTML und Body-Tag und natürlich den Rand und die Polsterung des Körpers auf Null setzen, und Sie können auch das Scrollen in Ihrem Haupt-Div für eine bessere Kontrolle handhaben

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

Lassen Sie uns nun die innere Höhe des Ansichtsfensters in JavaScript abrufen:

// 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`);

Quelle: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Benutzer-Avatar
Danronmond

Ich habe gerade herausgefunden, wie ich die Größe des Elements so ändern kann, dass die Höhe die Android-Smartphones ohne Home-Button mit der Bildschirm-Navigationsleiste UND der oberen Browserleiste nicht enthält. Wenn der Inhalt größer als der Bildschirm ist, sollte das Element auf die Größe wachsen, in die alles passt, deshalb verwende ich min-height.


BEARBEITEN:

Snippet mit einer Klasse hinzugefügt, anstatt das Styling in JS zu ändern

// save old window size to adjust only if width changed
let oldWidth = window.innerWidth,
  oldHeight = window.innerHeight;
// element to adjust
const target = document.querySelector(".vh100");
// adjust the size if window was resized
window.addEventListener("resize", handleResize);

function handleResize(initial = false) { // the parameter is used for calling the function on page load
  /*
   * if the width changed then resize
   * without this Chrome mobile resizes every time navbar is hidden
   */
  if (window.innerWidth !== oldWidth || initial) {
    // stretch the target
    target.classList.add("setting-100vh");
    // save height and apply as min height
    const h = target.clientHeight;
    target.classList.remove("setting-100vh");
    target.style.minHeight = h + "px";
  }
}
// call when page is loaded
handleResize(true);
* {
  margin: 0;
}

.vh100 {
  background-color: green;
}


/*
* Stretch the element to window borders and save the height in JS
*/

.setting-100vh {
  position: fixed;
  top: 0;
  bottom: 0;
  min-height: unset;
}
<body>
  <header class="vh100">
    <h1>100vh on mobile</h1>
  </header>
  <main>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsa officia mollitia facilis esse cupiditate, nisi recusandae quas id enim alias eaque suscipit voluptates laudantium quasi saepe deserunt labore fuga deleniti placeat, necessitatibus
      quibusdam. Quaerat adipisci provident minima laboriosam modi ullam accusamus error dolores iure ducimus laborum similique distinctio temporibus voluptas nulla quod ipsa, nostrum quam cumque id animi unde consectetur incidunt! Dolorem sed quisquam
      at cumque. Cumque non nam exercitationem corporis? Minus sed explicabo maiores ipsam ratione. Quam, fugit asperiores nesciunt dolores culpa, numquam blanditiis sint dolorum ex corrupti illo veniam nostrum odio voluptatibus accusantium ullam impedit
      eligendi voluptates?</p>
  </main>
</body>

Benutzer-Avatar
Thiagobraga

Ich bin auf ein ähnliches Problem gestoßen und habe diese Lösung mit ReactJS verwendet:

import { useLayoutEffect, useState } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

Dies useWindowSize Die Funktion wird aus der Rendern-Ansicht bei der Größenänderung des Browsers mit React übernommen.

Wenn ich es in meinem Code verwendet habe, sah es so aus:

const MessageList = () => {
  const { messages } = useContext(ChatContext);
  const [, windowHeight] = useWindowSize();
  return (
    <div
      className="messages"
      style={{
        height: windowHeight - 80 - 48, // window - message form - navbar
      }}
    >
      {messages.map((m, i, list) => ( <Message ... /> )}
    </div>
  );
};

  • Obwohl dies eine Lösung sein könnte, habe ich sie abgelehnt, weil Ihre Antwort die Installation und Verwendung von React erfordert, wodurch eine ganz neue Dose Würmer geöffnet wird.

    – William Randokun

    2. Dezember 2020 um 15:15 Uhr

  • Wow, du bist großartig! Du hast mich bei diesem hier gerettet

    – Jaypee Tan

    17. August 2021 um 6:22 Uhr

1017300cookie-check100 vh Höhe, wenn die Adressleiste angezeigt wird – Chrome Mobile

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy