У меня есть следующая страница:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
}
#outer
{
width:80%;
min-width:600px;
height:80%;
min-height:600px;
margin: 0 auto;
border:2px dashed red;
}
#inner
{
height:100%;
width:100%;
border:2px dashed blue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
Я ожидаю, что внутренний div останется на 100% высоты внешнего div после того, как минимальная высота будет достигнута (оба будут 600px).Это имеет место в IE9 и FF8.Я думаю, что это правильно, основываясь на W3C: http://www.w3.org/TR/CSS2/visudet.html#the-height-property.
Со страницы W3C:
Процент рассчитывается относительно высоты блока, содержащего сгенерированный блок,Если высота содержащего блока не указана явно (т. Е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как «auto».
Мой родительский элемент имеетЯвно заданная высота, поэтому нет необходимости в абсолютном позиционировании.(Что бы ни стоило, абсолютное позиционирование внешнего делителя действительно решает проблему, но это не должно быть необходимо.)
В Chrome, однако, внутренний делитель уменьшается с изменением размера окна после минимальнойвысота на внешнем элементе подсчитывается, вместо 100% высоты внешнего элемента, 600px;
Я думаю, у меня есть два вопроса: какая интерпретация правильна?Есть ли обходной путь для этого?