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

Прошу прощения, если это старая проблема или известная проблема, но я не смог найти ответ в Интернете. Если у меня есть кодУнаследованная высота дочернего 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>

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

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

источник

2010-09-27 Phil

Да, это ошибка WebKit, bug 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%.

источник

2010-09-27 23:48:01 bobince

Спасибо за ответ, это первый раз, когда я обнаружил, что рендеринг firefox и webkit отличается, и это подталкивало меня к стене. – Phil

+1 для упоминания спецификации CSS; что устраняет проблемы для меня. Интересно, что если вы определяете высоту ребенка как 'min-height: 100%', а не 'height: 100%', это работает, но только в Opera. На мой взгляд, это должно быть правильное поведение, но не так, согласно спецификации. Возможно, кто-то должен подать ошибку против спецификации :) –

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

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

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

источник

2010-09-27 23:25:42

Да, это сделает трюк. Если вы используете теги span и другие теги, вы можете вместо этого использовать '# div1 * {min-height: inherit}'. Спасибо за ответ - это лучшее решение, чем мое! – Phil

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

Надежда, что помогает.

источник

2012-02-08 16:29:11 Mik

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

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

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

источник

2014-12-11 16:43:29

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

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

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

источник

2015-05-13 02:21:57 Joy

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

ответ

Смежные вопросы