Унаследованная высота дочернего элемента div от родителя с атрибутом min-height - PullRequest
Новая
       8

Унаследованная высота дочернего элемента div от родителя с атрибутом min-height

10 голосов
/ 28 сентября 2010

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

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

Ответы [ 5 ]

22 голосов
/ 28 сентября 2010

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

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

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

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

3 голосов
/ 28 сентября 2010

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

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

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

1 голос
/ 13 мая 2015

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

<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%.

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

0 голосов
/ 11 декабря 2014

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

У меня была похожая проблема. Изображение переполняется из родительского блока 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 голосов
/ 08 февраля 2012

У меня была проблема с min-height на пустом 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;

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...