Абсолютное Положение внутри Относительного, когда окно Изменено в Адаптивном дизайне

Question

У меня есть 2 div элементов.

1-й div больше и имеет положение: относительно .

2-й div - это набор ящиков внутри 1-го div и имеет положение: абсолютное .

Когда я изменяю размер окна, чтобы оно стало отзывчивым, высота 2-го div увеличивается и переполняется 1-м div .

Я использую jQuery , чтобы сохранить высоту 1-го div всегда больше, чем 2-го div путем циклического перебора 1-го div childs и установки gestHeight в 1-е div .

Но высота 1-го div не увеличивается динамически при изменении размера. Мне нужно Обновить , чтобы увидеть эффект.

Я хочу, чтобы высота 1-го div динамически увеличивалась при изменении размера до $ (window) .width ()> = 576px.

Не уверен, может ли помочь что-то вроде $ (window) .resize ().

JQuery:

$(document).ready(function(){

    var biggestHeight = "0";
    // Loop through elements children to find & set the biggest height
    $(".thumbnail-portfolio *").each(function(){
     // If this elements height is bigger than the biggestHeight
     if ($(this).height() > biggestHeight) {
       // Set the biggestHeight to this Height
       biggestHeight = $(this).height();
     }  });

    // Set the portfolio container height. 
    $(".thumbnail-portfolio").height(biggestHeight+200);
    $(".img-size-portfolio").height(biggestHeight+200);

});

Вот полный код: [1]: https://codepen.io/darthvadercodes/pen/erdGZM

Обновление 1:

Проблема решена с помощью ответа @deebs. Обновление кода codepen с помощью решения, которое я искал.

Спасибо! всем за ваше время.

Решение:

[https://codepen.io/darthvadercodes/pen/erdGZM]

Answer 1

В javascript / jquery есть событие onResize, попробуйте реализовать его. https://api.jquery.com/resize/

Answer 2

Я считаю, что изменение вашего макета может быть лучше Вместо того, чтобы иметь это изображение с жестко запрограммированным значением 960px для высоты, вы можете удалить его и добавить свойство " background-image " в div с классом "container", который содержит поля. Потому что кажется, что нужно изменить размер изображения, а не div.

Answer 3

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

function setHeights() {
   var biggestHeight = "0";
   // Loop through elements children to find & set the biggest height
   $(".thumbnail-portfolio *").each(function(){
    // If this elements height is bigger than the biggestHeight
    if ($(this).height() > biggestHeight) {
      // Set the biggestHeight to this Height
      biggestHeight = $(this).height();
    }  });

   // Set the portfolio container height. 
   $(".thumbnail-portfolio").height(biggestHeight+200);
   $(".img-size-portfolio").height(biggestHeight+200);
}   

$(document).ready(function(){

   setHeights();
   $(window).resize(function() {
      setHeights();
   }); 

});

PS Если вы воспользуетесь этим подходом, вам нужно будет сбросить biggestHeight+200. Добавление 200 каждый раз приводит к экспоненциальному росту размера.

Согласно ответу Дибса, долгосрочнее было бы лучше реструктурировать страницу, поэтому вам не нужно полагаться на элементы с абсолютным позиционированием и ручное управление высотой.