HTML- und BODY-Selektor an Höhe anpassen: 100%; vs Verwendung von 100vh

Mein Bruder und ich waren zuvor in sublime rum und er plötzlich schreien: "Ich habe etwas Neues gelernt!"HTML- und BODY-Selektor an Höhe anpassen: 100%; vs Verwendung von 100vh

Ein wenig schockiert fragte ich: "Was ist das ...?"

Er antwortete, "Viewport Höhe! Ich fing in I.E.6 an, als es nicht völlig unterstützt wurde und schaute es nie wirklich wieder an." Er fuhr fort, es mir zu zeigen.

Darauf antwortete ich: "Ich habe das gleiche hier erreicht." und zeigte ihm ein anderes Sandbox-Projekt, mit dem ich herumgespielt habe.

In meinem Projekt, in der CSS, schrieb ich

(edit: Ich habe das Hintergrundfarbe in dem div zu setzen, nicht den HTML-oder Körper, mein Fehler)

(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/)

html, body { 
    height: 100%; 
} 

div { 
    height: 100%; 
    background: green; 
}

seinen Code ist, (jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/)

div { 
    height: 100vh; 
    background: green; 
}

Beide taten praktisch das Gleiche. Nach einigen Nachforschungen scheint es, als ob das Problem, das über die erstgenannte Methode auftreten würde, die Unfähigkeit zum Scrollen ist; Allerdings hatte ich in meinem Sandbox-Projekt mehr Inhalt und konnte normal mit der Website scrollen und interagieren.

Keiner von uns konnte feststellen, welche Unterschiede zwischen beiden Methoden bestanden. Würde hier jemand in der Lage sein, uns zu erziehen?

Vielen Dank!

Quelle

2014-12-23 Medri

Ein großer Vorteil der letzteren: Eine Höhe in Prozent benötigt eine Höhe, die auf dem Elternelement eingestellt ist, während 'vh' nicht, also können Sie es" überall "verwenden, sogar noch weiter unten in einem Elternteil Element, das keine Höhe oder andere Höhe hat. – CBroe

@Medri: Haben Sie diesen Artikel gesehen? http://www.weareconvoy.com/2014/07/css-vw-and-vh-units-are-they-worth-using-yet/ – Grafica

@CBroe Danke! Das haben wir definitiv übersehen. Ich persönlich ging davon aus, dass, da die HTML- und BODY-Elemente des Dokuments die Haupteltern wären, deren Höhe bereits auf 100% gesetzt ist, es keine Rolle spielen würde, ob neue Elemente hinzugefügt werden. Es scheint, als ob vh ein spezifischeres Styling statt eines universellen Catch ermöglicht. – Medri

height: 100vh = 100% des Darstellungshöhe

height: 100% = 100% der Elementhöhe der Mutter

Deshalb sollen Sie height: 100% auf html und body, hinzufügen müssen, da sie nicht eine Größe haben, Standardmäßig

Etwas, das Sie wissen müssen: Wenn Sie% für den vertikalen Rand oder Abstand verwenden, wird% auf der Breite des übergeordneten Elements berechnet, nicht die Höhe.

Tipp: versuchen, für Schriftgröße vh und vw Einheiten mit :) ich dies mag (nicht in einigen Browsern unterstützte ich weiß): font-size: calc(.5vh + .5vw); (zum Beispiel)

eine schöne Seite finden Sie hier CSS-Einheiten: http://css-tricks.com/the-lengths-of-css/

Quelle

2015-01-06 18:15:54 sodawillow

Meinten Sie "Deshalb müssen Sie' height: 100vh' in 'html' und' body' hinzufügen? Ansonsten scheint es mir, dass es 100% einer undefinierten Zahl ist. – user14717

@NickThompson nein ich meinte 100%. Ich versuche herauszufinden, warum, aber HTML weiß, wo Sie den Wert finden. Siehe [diese andere Frage] (http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) – sodawillow

Diese Zeile, die die Schriftgröße abhängig von sowohl dem vw als auch vh macht, ist wirklich hilfreich – cjsimon

HTML- und BODY-Selektor an Höhe anpassen: 100%; vs Verwendung von 100vh

Antwort

Verwandte Themen