Höhe 100% auf html/body funktioniert nicht auf iPhone

Habe ich eine responsive website, über eine Stiftung mit einem footer absolut positioniert am unteren Rand der Seite. Auf meinem desktop-Browser, es sieht genau so aus wie es soll, aber auf meinem iPhone wird die Fußzeile überlappen einige der Inhalte, anstatt den ganzen Weg unten auf der Seite.

Habe ich meine html -, body CSS festgelegt:

html, body {
    height:100%;
    margin:0;
    padding:0;
}

Aber wenn ich überprüfen Sie die Seite auf meinem Handy mit dem Safari-Entwickler-tools, wenn ich den Mauszeiger über das html-oder body-tag, es ist nicht bis hin zu der Unterseite der Seite, die ist, was meine Fußzeile überlappen Inhalt.

Weiß jemand, was könnte die Ursache sein?

Dank!

InformationsquelleAutor user13286 | 2014-10-01
  1. 14

    Den Sie verwenden könnten:

    height: 100vh;

    werden 100% der viewport-Höhe.

    Browser Kompabilität: http://caniuse.com/#search=vh

    • Gott sei Dank für diese Frage und Ihre Antwort. Ich werde verrückt. Mit 100vh (und min-height: 100%; für eine gute Maßnahme) und entfernen zusätzliche container-divs ist das, was schließlich für mich gearbeitet. Danke!
    InformationsquelleAutor TheFrozenOne
  2. 1

    Können Sie calc, -moz-calc and -webkit-calc. Zum Beispiel, sagen wir, der footer ist 100px height, dann:

    html, body, .container{
    height: -moz-calc(100% - 100px);
    height: -webkit-calc(100% - 100px);
    height: calc(100% + 30px - 100px);
    margin:0;
    padding:0;
}
    InformationsquelleAutor Juancho Ramone
  3. 0

    versuchen Sie,

    min-height: 100%;
min-width: 100%;

    Ihre CSS-Regel

    InformationsquelleAutor Jonas Grumann
  4. 0

    Können Sie auch ein screen machen bestimmten Stil

    @media screen {
  html, body {
     height: 100vh;
  }
}

    Mehr über media queries hier http://cssmediaqueries.com/what-are-css-media-queries.html

    InformationsquelleAutor Peter
Schreibe einen Kommentar