Унаследованная высота дочернего 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? A min-height:inherit работает, если он помещается во внутренний div, но в случае с множеством div в пределах одного из них для каждого дочернего div потребуется min-height:inherit. Есть ли еще более элегантные решения?

Ответ 1

Да, это ошибка WebKit, ошибка 26559.

height в % по элементам с неподвижным или относительным расположением вычисляется относительно содержащего блока указанного свойства height вместо расчетной высоты с учетом min-height и max-height. То же самое не для ширины.

Вы можете посмотреть, откуда это взялось, в CSS 2.1, в котором указано, что высота содержащего блока должна быть явно задана для того, чтобы % работать. Но в нем явно не указано, что "явно означает! Браузеры восприняли это как означающее, что свойство height должно быть настроено на неавтоматическое значение, которое достаточно справедливо, за исключением того, что height не все, что нужно для увеличения. Другие браузеры позволяют min-height/max-height влиять на высоту, которая будет использоваться, но не позволяют ей понимать" явный". WebKit идет дальше (и это определенно не обязано спецификацией), используя только height в вычислении, а не min/max.

В качестве обходного пути вы можете попробовать абсолютное позиционирование, которое не будет затронуто. Относительное положение внешнего div, абсолютное положение внутреннего в left: 0; top: 0; width: 100%; height: 100%.

Ответ 2

Я думаю, что это только различия между двумя CSS браузером по умолчанию. Попробуйте следующее:

<style>
    div {min-height: inherit;}
    #div1 {height:50%; min-height:200px;background-color:red;}
    #div2 {height:100%; background-color:black;}
</style>

Это работает для меня.

Ответ 3

В нашем проекте изображение должно быть вертикально и горизонтально. И нам нужно настроить изображение в соответствии с размером экрана. Я считаю, что размещение изображения в качестве фона позволяет решить проблему:

<style>
    .parent {
        height: 100%;
    }
    .image {
        height: 100%;
        background: url('/path/to/your/image') no-repeat 50% 50%;
        -o-background-size: contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        background-size: contain;
    }
</style>
<div class="parent">
    <div class="image"></div>
</div>

Здесь 50% 50% делает изображение горизонтально и вертикально центрировано. И background-size: contain гарантирует, что фон не превышает границу родителя (размер фона MDN):

содержать. Это ключевое слово определяет, что фоновое изображение должно быть масштабируется настолько, насколько это возможно, обеспечивая при этом оба его размера меньше или равно соответствующим размерам область фонового позиционирования.

Таким образом, родителям не нужно указывать абсолютные единицы. Вот height: 100% достаточно.

Один из недостатков: изображение будет увеличено, чтобы заполнить родительское пространство.

Ответ 4

У меня была проблема с минимальной высотой на пустом div в Chrome (OSX 10.6). Я не знаю, было ли такое же поведение ошибки, но я нашел свое решение с изменением атрибута размера окна.

Не работает в Chrome Mac:

box-sizing:border-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

Работа в Chrome Mac:

box-sizing:content-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

Надеюсь, что это поможет.

Ответ 5

Я хотел бы опубликовать свое решение, так как мне потребовалось некоторое время, чтобы заставить мой код работать, и, возможно, кто-то найдет это полезным, несмотря на то, что это старая тема...

У меня была проблема simillar. Изображение было переполнено из родительского блока flex-child. Это произошло только в браузерах Chrome и Opera (веб-браузеры), трезубец и геккон были достаточно умны, чтобы справиться с ситуацией. Я попробовал несколько решений здесь при переполнении стека, но ни один из них не дал прямого решения, поэтому я перекрестно придумал обходной путь, добавив еще один контейнерный слой между вышеупомянутым изображением и родителем. В ситуации, представленной на открытии, это будет выглядеть так:

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

Это создает контейнер (#div_fix), который получает статические высоты и ширину, которые затем могут быть правильно использованы в webkit для вычисления правильной высоты в # div2. Обратите внимание, что положение: относительное и положение: абсолютные свойства являются обязательными для его работы.

И да, это выглядит плохо, но выполняет свою работу:)