Вопросы Теги

Высота, унаследованная от дочернего div от родительского с атрибутом min-height

Прошу прощения, если это старая проблема или известная проблема, но мне не удалось найти ответ в Интернете. Если у меня есть код 

<style>
    html, body { height: 100%; width: 100%;}
    #div1 {height:50%; min-height:200px;background-color:red;}
    #div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>

, то в firefox черный внутренний div сжимается по мере сжатия экрана и останавливается на высоте 200 пикселей. Однако в браузере webkit красный внешний div останавливается, но внутренний div продолжает сжиматься, как если бы он был в родительском div без атрибута min-height.

Есть ли простое решение для приведения версии webkit в соответствие с firefox рендеринг? min-height: inherit работает, если размещено во внутреннем div, но в случае большого количества div внутри одного для этого потребуется min-height: inherit для каждого дочернего div. Есть ли более элегантные решения?

11
задан Wex 4 May 2012 в 01:32
поделиться