Volle Bildschirmhöhe bei Smartphones ausnutzen

[Yogilein]

Ich habe mal wieder ein Problemchen:

Ich möchte ein DIV in der Höhe variabel gestalten, so dass die gesamte Bildschirmhöhe ausgenutzt wird.

Das DIV sieht so aus:

body,html{height:100%;}
#meinDIV{height:calc(100vh - 418px);}

Eigentlich funktioniert es, wenn nicht unten im Handy-Bildschirm der weiße Balken mit dem Strich drin liegen würde, der den unteren Bereich überdeckt.

Was also muss ich tun?

 

[mo]

Hi,
statt height könntest du min-height verwenden, um sicherzustellen, dass dein DIV mindestens die gesamte Bildschirmhöhe einnimmt:

body, html {
    height: 100%;
}

#meinDIV {
    min-height: calc(100vh - 418px);
}

 

[Yogilein]

Danke, aber das macht genau das Gegenteil. Das DIV wird nun so groß wie sein Inhalt und sprengt dadurch die Seitengröße bei weitem.

Das DIV hätte genauso groß werden sollen, dass es zusammen mit den anderen DIVs genau die Seite ausfüllt. Am PC problemlos, aber leider nicht bei den Smartphones.

 

[mo]

Neuer Versuch:

body, html {
    height: 100%;
    margin: 0; /* Stelle sicher, dass der Standardmargenwert entfernt ist */
    padding: 0; /* Stelle sicher, dass der Standardpaddingwert entfernt ist */
}

#meinDIV {
    height: 100vh; /* Nutze die gesamte Bildschirmhöhe */
    box-sizing: border-box; /* Das Box-Modell berücksichtigen */
    /* Hier kannst du weitere Styles für dein DIV hinzufügen */
}

Ansonsten poste doch zumindest mal einen Screenshot.

 

[Yogilein]

Das obere DIV (mit dem Bild) soll flexibel sein und genau so groß werden, dass immer die ganze Seite nach unten hin ausgefüllt ist.

Beim Handy wird sogar der obere und untere Teil nicht berücksichtigt und dadurch wird die Seite unten abgeschnitten und muss gescrollt werden. Der CSS-Wert vh weiß also nicht, dass der Viewport eingeschränkt ist.




Beim PC sieht es dagegen wie gewünscht aus, egal wie groß ich das Fenster ziehe. Eigentlich ist hier der Viewport oben auch eingeschränkt, aber es funktioniert.




Und das wünsche ich mir: