Höhe 100% oder mehr für den Inhalt, ohne visuelle Artefakte
Als Teil meiner modernen Webentwicklung erstelle ich eine Beispielzielseite mit Bootstrap und jQuery. Zu Demonstrationszwecken wurde der Code vereinfacht, wobei nur HTML- und CSS-Bits übrig blieben.
Die Idee besteht darin, mehrere Seiten HTML auf einer Seite zu haben, von denen jede 100% des Ansichtsfensters des Browsers einnimmt.
Teil des Problems ist, dass auf tragbaren Geräten Inhalte oft nicht passen, so dass height:100% nicht mehr funktioniert und Inhalt überlappt. Ich probierte verschiedene Kombinationen von min-height und height , keiner von ihnen scheint zu funktionieren.
Ich möchte das Responsive-Design-Prinzip beibehalten und den Inhalt so weit wie möglich verkleinern, aber alles ohne Überlappungen lesbar halten.
Wie reproduzieren Sie das Problem auf JSFiddle - scrollen Sie einfach nach unten, Sie sehen Inhalte überlappend.
So reproduzieren Sie in der Live-Version - verkleinern Sie die Browserhöhe, um die Hälfte des internen Containers auf Seite 1 anzuzeigen. Scrollen Sie dann nach unten, Sie sehen sofort, dass Seite 2 gestartet wird.
Vor dem Bildlauf (Simulation mit niedriger Bildschirmhöhe - Seite 1 passt nicht in 100% Höhe) :
Nach dem Bildlauf (zweite Seite überlappt # 1) :
Ich habe die am höchsten gewählte relevante Frage zu SO überprüft vor dem Posten - keine dieser Lösungen funktionierte für mich. Bitte beraten.
HTML:
%Vor%CSS:
%Vor%3 Antworten
Aktualisiert
Hier ist eine aktualisierte Geige
Ich habe diese CSS-Regeln geändert
%Vor%Und ich habe das Folgende auskommentiert
%Vor% Wenn Sie top: 200px; auf ein Element mit position: relative; setzen, wird dieses Element um 200px nach unten gedrückt, aber alle anderen Elemente bleiben dort, wo sie ursprünglich waren, was dazu führt, dass das verschobene Element die anderen (s). <überlappt / p>
Ich habe eine einfache Idee, die Ihnen helfen könnte, das Problem zu lösen. Wie ich festgestellt habe, ist die Schriftgröße immer gleich, egal wie die Bildschirmauflösung ist, daher überlappt sich der Inhalt.
Sie können Medienabfragen wie diese verwenden:
%Vor%Sie können die Schriftgrößen entsprechend Ihrer Anwendung anpassen.
Eine andere Option ist die Verwendung von typografischen Viewport-Einheiten wie vh und vw , aber sie sind keine so gute Lösung, denke ich.
Probieren Sie diese aktualisierte Geige
aus