Динамически изменять высоту суммированных div?

Question

Динамически изменять высоту суммированных div?

0

На моей странице magento у меня есть раздел, где у меня есть 3 коллажа изображений, уложенных друг на друга.

Мне бы хотелось, чтобы каждый "коллаж"/div динамически изменял его высоту до высоты браузера, в который вы его открыли, так что, когда вы прокручиваете вниз, каждый из них идеально подходит к окну.

Я пытался:

<script type="text/javascript">
$(window).resize(function() {
$('#universe1').height($(window).height() - 46);
});

$(window).trigger('resize');
</script>

и сделать каждый div id'd "universe1", но это, похоже, не помогло.

Есть идеи?

user3179784 10 янв. 2014, в 06:49

Источник

0

я думаю, что вы должны использовать масонский сценарий для этого
Keyur Shah 10 янв. 2014, в 05:23
0

Для страницы каждый идентификатор должен быть уникальным. Что вы имеете в виду, make each div id'd "universe1" ?
surfmuggle 10 янв. 2014, в 05:32

Теги:

javascript

jquery

resize

magento

height

1 ответ

Ещё вопросы

я думаю, что вы должны использовать масонский сценарий для этого
Для страницы каждый идентификатор должен быть уникальным. Что вы имеете в виду, make each div id'd "universe1" ?

Steve G. · Accepted Answer · 2014-01-10T02-56-00.000Z

Используйте метод jquery.on() для присоединения обработчика событий.

<!-- HTML -->
<div class="universe">1</div>
<div class="universe">2</div>
<div class="universe">3</div>

// jQuery
$(window).on('resize', function() {
    $('.universe').height($(window).height() - 46);
});

$(window).trigger('resize');

Рабочий пример: http://jsbin.com/IFEPEkaY/1/

Также убедитесь, что вы используете классы, как в приведенном выше примере, НЕ ИД, как в вашем коде. Если вы используете идентификаторы, только первый будет отображаться в полноэкранном режиме. Если вы ДОЛЖНЫ использовать идентификаторы (это уродливо), самое простое сделать это:

<!-- HTML -->
<div id="universe1">1</div>
<div id="universe2">2</div>
<div id="universe3">3</div>

// jQuery
$(window).on('resize', function() {
    $('#universe1').height($(window).height() - 46);
    $('#universe2').height($(window).height() - 46);
    $('#universe3').height($(window).height() - 46);
});

$(window).trigger('resize');

Рабочий пример: http://jsbin.com/eboXAXEq/1

Я пробовал это, но кажется, что высота не влияет?