Вот фрагмент репликации проблемы в обычном HTML/CSS/Javascript, поэтому, когда я удаляю элемент из ящиков, высота не адаптируется.
Код: Выделить всё
function setEqualHeights() {
const items = [
"first-item",
"second-item",
"third-item",
"fourth-item",
];
items.forEach((item) => {
const elements = document.querySelectorAll(`.${item}`);
let maxHeight = 0;
elements.forEach((el) => {
el.style.height = "auto";
const height = el.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
1;
}
});
elements.forEach((el) => {
el.style.height = `${maxHeight}px`;
});
});
}
window.addEventListener("load", setEqualHeights);
window.addEventListener("resize", setEqualHeights);Код: Выделить всё
.first-item {
height: var(--first-item-height);
}
.second-item {
height: var(--second-item-height);
}
.third-item {
height: var(--third-item-height);
}
.fourth-item {
height: var(--fourth-item-height);
}Код: Выделить всё
Document
first Remove
first Remove
first Remove
first Remove
first Remove
first Remove
first Remove
first Remove
second Remove
second Remove
second Remove
second Remove
second Remove
second Remove
second Remove
second Remove
Из-за сложности передачи данных я не могу изменить структуру HTML и есть похожие элементы в div.
Итак, теперь я синхронизирую высоту с JavaScript. С синхронизацией у меня все в порядке.
Но когда пользовательский интерфейс меняется в зависимости от фильтров, высота полей не адаптируется.
Я пробовали устанавливать minHeight, это помогает при увеличении высоты, но не помогает при уменьшении высоты.
Также пробовал временно установить автоматическую высоту до и после установки фиксированной высоты, но не работает должным образом.
п>
Подробнее здесь: https://stackoverflow.com/questions/785 ... e-based-on
Мобильная версия