Seite springt bei "min-height: 100%"

  • Hallo, ich möchte gerne eine "Single-page" Seite erstellen.
    Auf dem Desktop funktioniert dies auch alles wunderbar.
    Bei mobilen Geräten sieht es etwas anders aus, dort springt die Seite.


    Dies hat den Grund, das jede section als min-height den Wert 100% hat. Dadurch werden sections die kleiner als 100% sind, soweit aufgezogen, dass sie die vollständige Höhe einnehmen.


    Bei mobilen Geräten verschwindet aber die Adresszeile heim herunter-scrollen und wird beim hoch-scrollen wieder eingeblendet.
    Selbstverständlich ist dadurch eine Höhe von 100% absolut betrachtet mit und ohne Adresszeile unterschiedlich.
    Es findet somit ein Resize statt.


    Habt ihr bereits mit "min-height: 100%" gearbeitet. Wie seit ihr damit umgegangen bzw. würdet ihr umgehen?
    `
    Vielen Dank und Grüße


    P. S: window.locationbar.visible liefert in jedem Zustand true

  • Hallo

    ohne Link zur Seite können wir dir nur allgemeine Informationen geben.

    Zitat

    Dies hat den Grund, das jede section als min-height den Wert 100% hat. Dadurch werden sections die kleiner als 100% sind, soweit aufgezogen, dass sie die vollständige Höhe einnehmen.

    Du scheinst dir über den Sinn und die Auswirkungen von height bzw. min-height nicht im klaren zu sein. Deshalb wendest du das falsch an und die Browser müssen die fehlerhafte Ansicht ständig (bei jedem Scrollen) korrigieren.

    Die Browser auf Desktop Rechnern haben genügend Speicher und Power um das im Hintergrund zu erledigen. Smartphones und Tablets zwingst du damit in die Knie. Die fangen dann ähnlich wie bei JavaScript-Anwendungen an zu zucken.

    Gruss

    MrMurphy

  • Ich habe mal eine Demonstration erstellt.
    https://minheightdemo-melatonin.c9.io/


    Die Browser müssen dies nicht ständig korrigieren, sondern nur dadurch, dass die Adresszeile verschwindet.
    Dies hat, wie bereits beschrieben, eine absolute Höhenveränderung zur Auswirkung.


    Meine Lösung wird grundlegend an diversen Stellen propagiert.
    http://stackoverflow.com/questions/1195…of-the-viewport


    Leider wird aber da nicht auf das Problem mit der Adresszeile eingegangen.