Ich stolperte neulich über ein Problem mit viewport-relativen Längen in CSS. Die Situation war konkret folgende:
Ich hatte eine ungeordnete Liste, deren Elemente je ein <div> enthielten, in dem sich wiederum ein <a> befand:
<ul>
<li>
<div><a href="#">Test</a></div>
</li>
</ul>
Zuerst ein Beispiel, wie es funktionieren sollte. Die <li>-Elemente sollen eine definierte Höhe haben und die <div>s sollten genauso hoch sein. Das CSS dazu:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
li {
background: blue;
height: 10em;
}
div {
background: red;
height: 100%; /* Genau so hoch wie sein Container */
}
Hier ist ein JS-Fiddle dazu. Wie erwartet bedeckt das rote <div> das gesamte Listenelement. Ruhig auch mal in verschiedenen Browsern ansehen.
Jetzt geben wir dem <li>-Element aber eine vom Viewport abhängige Größe:
li {
height: 30vw; /* Die Höhe soll 30 Prozent der Breite des Viewports betragen */
}
Im Firefox sieht es immer noch genau so aus wie vorher. Das würde man (ich) auch erwarten. Schließlich hat das Listenelement eine definierte Größe und ich sage, dass sein direktes Kindelement 100% dieser Größe haben soll. Sieht man sich das Ergebnis in Chrome an, zeigt sich aber ein anderes Bild.
Das <li> hat zwar die richtige Größe, aber das <div> ist nur so hoch, wie es sein Inhalt (eine Textzeile) erfordert. Sogar im IE9 wird es korrekt (wie im FF) dargestellt. Opera unterstützt derzeit keine viewport-related lengths, aber da auch dort demnächst ein Webkit rendert, wird es sich wohl auch nur mittelmäßig zum Guten ändern.
Anscheinend muss man derzeit also entweder für Chrome in solchen Fällen auch jedem Kindelement die v*-Größe zuweisen, oder mit anderen Längeneinheiten arbeiten. Schade.