Доброй ночи!
Этот код, как не трудно догадаться, создаёт блок и три секции в нём. Когда увеличивается высота секции, также увеличивается и высота родительского блока.
.unit { float: left; width: 100%; background: #111; }
section { display: block; float: left; box-sizing: border-box; overflow: hidden; }
<div class="unit">
<section>
Lorem ipsum
</section>
<section>
Dolor sit amet
</section>
</div>
Нужно, чтобы все секции в блоке были равны по высоте. Ниже рабочий пример подгонки на jQuery.
$(document).ready(function() {
$(".unit > section").each(function() {
$(this).css("min-height", $(this).parent().outerHeight());
});
});
А ещё нужно, чтобы при изменении размеров окна, высота дочерних секций также изменялась под размер родительского блока. Вот с этим ничерта не получается. Точнее, при уменьшении, т.к. в моём коде min-height для каждой секции уже однозначно задан при первой загрузке страницы. Есть идеи, как такое сделать?
$(window).resize(function() {
$(".unit > section").each(function() {
// . . .
});
});
