Унаследованная высота дочернего 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 сжимается по мере того, как экран сжимается и останавливается на высоте 200px. Однако в браузере webkit красный внешний div останавливается, но внутренний div продолжает сжиматься, как если бы он был в Родительском div без атрибута min-height.

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

10
cross-browser css

5 ответов

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

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

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

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

22

Я думаю, что это только различия между 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 background-size):

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

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

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

1

у меня была проблема с min-height на пустом div В Chrome (OSX 10.6). Я не знаю, если это то же самое поведение ошибки, но я найдено мое решение с изменением атрибута box-sizing.

не работает в 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;

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

0

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

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

<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. Обратите внимание, что позиция:относительная и позиция:абсолютные свойства являются обязательными для его работы.

и да, это выглядит плохо, но дело сделано:)

0