LINUX.ORG.RU
решено Форум — Web-development  

Динамическое изменение высоты блоков

 , ,


0

1

Доброй ночи!

Этот код, как не трудно догадаться, создаёт блок и три секции в нём. Когда увеличивается высота секции, также увеличивается и высота родительского блока.

.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() {

        // . . .

    });

});

Ответ на: комментарий от sphericalhorse

Нет, ширина однозначно задаётся в зависимости от ширины рабочей области, которая в свою очередь определяется разрешением экрана с помощью media queries.

papasha
() автор топика
Ответ на: комментарий от sphericalhorse

Вообще, это очень хорошо, только при отображении таблицей нельзя использовать float и margin. Соответственно, нельзя сделать промежутки между блоками. Разве что впихивать в каждую ячейку по блоку. Мне кажется, что в данном случае, оптимальнее применить скрипт на стороне клиента. И даже если на сайт зайдёт кто-нибудь с отключенным яваскриптом, то неточно отображённые блоки менее критичны, чем перегрузка страниц лишними html-элементами.

papasha
() автор топика
Ответ на: комментарий от papasha

Причины использовать тут float я не вижу, а вот с margin'ами да, это проблема.

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

sphericalhorse ★★★★★
()
Ответ на: комментарий от papasha

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

sphericalhorse ★★★★★
()

Точнее, при уменьшении, т.к. в моём коде min-height для каждой секции уже однозначно задан при первой загрузке страницы. Есть идеи, как такое сделать?

Есть. На resize сбрасываешь значение min-height для всех блоков (ставишь auto), а затем заново рассчитываешь в зависимости от новых размеров окна.

Boba_Fett ★
()

Всего-то: 

$(window).resize(function() {

    $(".unit > section").each(function() {

        $(this).css("min-height", 0);
        $(this).css("min-height", $(this).parent().outerHeight());

    });

});

papasha
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development