Nano Hash - криптовалюты, майнинг, программирование

Как перезагрузить div для дочернего элемента одинаковой высоты при изменении размера окна

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

$(window).on('load resize', function () {
     $('.equal-height-wrapper').each(function () {
     var heightArray = [];
     var allbox = $(this).find(".equal-height-box");
     $(allbox).each(function () {
     heightArray.push($(this).height());
     });
     var maxBoxHeight = Math.max.apply(Math, heightArray);
     $(this).find('.equal-height-box').css('height', maxBoxHeight);
     });
});

<div class="equal-height-wrapper">
  <div class="inner-wrapper">
    <div class="equal-height-box">

    </div>
    <div class="equal-height-box">

    </div>
  </div>
</div>

Я хочу обновить высоту дочерних элементов при их изменении. На данный момент я добавил скрытое переполнение, чтобы любой текст, который перекрывается, скрывался.

Я пробовал поместить этот скрипт при изменении размера загрузки, но это не имеет никакого значения.

javascript jquery css resize equal-heights
28.04.2017

  • Можете ли вы также добавить части HTML и, возможно, CSS, которые имеют отношение к вашему вопросу? 28.04.2017
  • Можете ли вы включить код, который обрабатывает события изменения размера загрузки и вызывает приведенный выше код 28.04.2017
  • я обновил код 28.04.2017

Ответы:


1

Обернутый код в именованную функцию, чтобы вы могли вызывать ее различными способами. Я бы заменил окно .load на $.ready. Также добавлено событие orientationchange. Тогда вы получите что-то вроде:

function setEqualHeight() {
  $('.equal-height-wrapper').each(function() {
    var heightArray = [];
    var allbox = $(this).find(".equal-height-box");
    $(allbox).each(function() {
    $(this).height("");  // remove previously set heights
    heightArray.push($(this).height());
    });
    var maxBoxHeight = Math.max.apply(Math, heightArray);
    $(this).find('.equal-height-box').css('height', maxBoxHeight);
  });
}

$(function() {
  $(window).on('resize', setEqualHeight);
  $(window).on('orientationchange', setEqualHeight);
  setEqualHeight();
});
28.04.2017
  • Да, главное, что я упустил: убрать ранее установленные высоты! Это встроенные стили, они имеют большую специфичность (важность) css, чем стили из таблицы стилей или тега стиля, поэтому jquery будет их использовать! В любом случае, решение только css, конечно, лучше... но все равно отредактировал мой скрипт 28.04.2017
  • Пожалуйста! Кстати, если происходит большое изменение размера и загрузка процессора вызывает беспокойство, вы можете захотеть сделать некоторое ограничение скорости при вызове setEqualHeight() 28.04.2017

    • 2

    Почему бы не использовать только CSS? Что-то вроде этого может сработать...

    (Обновлено для работы с ФИКСИРОВАННОЙ высотой контейнера и неизвестной высотой контейнера)

    /* For fixed container HEIGHT */
.container-1 {
    display: block;
    width:150px;
    background-color:yellow;   
    height:200px;
}
.child-1 {
    width: 30px;
    background-color: red;
    display: inline-block;
    vertical-align: top;
    top:0px;
    bottom:0px;
    height:100%;
}
/* FOR UNKNOWN CONTAINER HEIGHT */
.container-2 {
    display: table;
    width:150px;
    background-color:yellow;   
}
.child-2 {
    width: 30px;
    background-color: red;
    display: table-cell;
    vertical-align: top;
}

    Демонстрация: http://jsfiddle.net/bkG5A/740/

    Вы также можете рассмотреть возможность использования CSS FLEX.

    28.04.2017
  • да... но здесь контейнер имеет высоту 200 пикселей. Для меня высота не фиксирована... это может быть что угодно 28.04.2017
  • уберите высоту контейнера и все равно будет работать. Я только что добавил дополнительный CSS, чтобы четко показать поведение (например, высоту и цвета). Я обновлю код, чтобы сохранить основное. 28.04.2017
  • только что проверил jsfiddle.. два красных ящика имеют разную высоту... я пытался добиться одинаковой высоты для обоих красных ящиков 28.04.2017
  • Ты прав. Я снова обновился, чтобы работать в обеих ситуациях, используя только CSS. 28.04.2017
  • эй, да, это работает ... но у меня есть сомнения ... что, если дочерний элемент не является прямым дочерним элементом ... Я обновил html в своем вопросе. Сценарий на самом деле работает, даже если ребенок не является прямым потомком ... просто при изменении размера ... ему нужно снова выполнить эту работу. 28.04.2017
  • В таком случае не сработает. Только для прямых потомков контейнера. 28.04.2017
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..