Расчет высоты по браузерам: содержащие блоки и дочерние элементы
Подхватил это в самой SO - «расчет высоты», сделанный браузерами (когда мы явно не установилиheight но мы установилиmin-height) дляконтейнер который имеетдети (у кого высота в процентах относительно контейнера):
Не устанавливая высоту, я установилmin-height и это не работает - обратите внимание, что вычисленное значение высоты - это значение, которое я дал дляmin-height, Дети не получают 50% роста, который я им дал - см. Ниже:
* {
box-sizing: border-box;
}
.inline-container,
.block-container,
.float-container,
.inline-block-container {
border: 1px solid red;
min-height: 100px;
}
.inline-container > * {
border: 1px solid;
height: 50%;
}
.block-container > * {
border: 1px solid;
height: 50%;
}
.float-container > * {
float: left;
border: 1px solid;
height: 50%;
}
.float-container:after {
clear: both;
content: '';
display: block;
}
.inline-block-container > * {
display: inline-block;
border: 1px solid;
height: 50%;
} <body>
<div class="inline-container">
<span>Inline 1</span>
<span>Inline 2</span>
</div>
<div class="block-container">
<div>Block 1</div>
<div>Block 2</div>
</div>
<div class="float-container">
<div>Float 1</div>
<div>Float 2</div>
<div>Float 3</div>
</div>
<div class="inline-block-container">
<div>Inline block 1</div>
<div>Inline block 2</div>
<div>Inline block 3</div>
</div>
</body>Теперь я установилheight: 0 оно работает! Смотрите пример ниже:
* {
box-sizing: border-box;
}
.inline-container,
.block-container,
.float-container,
.inline-block-container {
border: 1px solid red;
min-height: 100px;
height: 0;
}
.inline-container > * {
border: 1px solid;
height: 50%;
}
.block-container > * {
border: 1px solid;
height: 50%;
}
.float-container > * {
float: left;
border: 1px solid;
height: 50%;
}
.float-container:after {
clear: both;
content: '';
display: block;
}
.inline-block-container > * {
display: inline-block;
border: 1px solid;
height: 50%;
} <body>
<div class="inline-container">
<span>Inline 1</span>
<span>Inline 2</span>
</div>
<div class="block-container">
<div>Block 1</div>
<div>Block 2</div>
</div>
<div class="float-container">
<div>Float 1</div>
<div>Float 2</div>
<div>Float 3</div>
</div>
<div class="inline-block-container">
<div>Inline block 1</div>
<div>Inline block 2</div>
<div>Inline block 3</div>
</div>
</body>Вопрос:
Поэтому мой вопрос - что здесь происходит, - я действительно удивлен! Почему дети не соблюдают вычисленную высоту вмещающего блока, когда я задаю ему минимальную высоту. Ребята, можете посмотреть на это?