To jest zgłoszony błąd webkita (chrome / safari). Dzieci rodziców z minimalnym wzrostem nie mogą dziedziczyć właściwości height: https://bugs.webkit.org/show_bug.cgi?id=26559
Najwyraźniej dotyczy to również Firefoksa (w tej chwili nie można testować w IE)
Możliwe obejście:
- dodaj pozycję: względem #containment
- dodaj pozycję: bezwzględna do # zawierającego cień-lewy
Błąd nie pojawia się, gdy element wewnętrzny ma pozycjonowanie bezwzględne.
Zobacz http://jsfiddle.net/xrebB/
Edytuj 10 kwietnia 2014 r
Ponieważ obecnie pracuję nad projektem, dla którego naprawdę potrzebuję kontenerów nadrzędnych min-height
i elementów podrzędnych dziedziczących wysokość kontenera, przeprowadziłem dalsze badania.
Po pierwsze: nie jestem już taki pewien, czy obecne zachowanie przeglądarki naprawdę jest błędem. Specyfikacje CSS2.1 mówią:
Procent jest obliczany w odniesieniu do wysokości bloku zawierającego wygenerowane pudełko. Jeśli wysokość bloku zawierającego nie jest określona jawnie (tj. Zależy to od wysokości zawartości), a ten element nie jest pozycjonowany bezwzględnie, wartość jest obliczana jako „auto”.
Jeśli umieszczę minimalną wysokość w moim kontenerze, nie określam jawnie jego wysokości - więc mój element powinien uzyskać auto
wysokość. I to jest dokładnie to, co robi Webkit - i wszystkie inne przeglądarki.
Po drugie, obejście, które znalazłem:
Jeśli ustawię mój element kontenera na display:table
with height:inherit
, działa dokładnie tak samo, jakbym dał mu min-height
100%. I - co ważniejsze - jeśli ustawię na display:table-cell
to element podrzędny , doskonale odziedziczy wysokość elementu kontenera - czy to 100%, czy więcej.
Pełny CSS:
html, body {
height: 100%;
margin: 0;
}
#container {
background: green;
display: table;
height: inherit;
width: 100%;
}
#content {
background: red;
display: table-cell;
}
Znaczniki:
<div id="container">
<div id="content">
<p>content</p>
</div>
</div>
Zobacz http://jsfiddle.net/xrebB/54/ .
display:flex
iflex-direction:column
i dać dzieckuflex:1
.