Могу ли я в любом случае синхронизировать высоту, когда высота ящиков изменяется в зависимости от фильтров?CSS

Разбираемся в CSS
Ответить
Anonymous
 Могу ли я в любом случае синхронизировать высоту, когда высота ящиков изменяется в зависимости от фильтров?

Сообщение Anonymous »

Я делаю пользовательский интерфейс для сравнения. Я хочу выровнять каждый левый элемент с правым. Иногда одна сторона элемента div может быть пустой, поскольку содержимое изменяется в зависимости от фильтра, но она все равно должна занимать то же пространство, что и другая сторона, чтобы все остальные элементы выравнивались друг с другом.
Вот фрагмент репликации проблемы в обычном 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»