Как задать мининимальную высоту?

Question

[zveronol]

если 3 итема

пример
в первом итеме первый элемент по высоте 30 пикселей
во втором итеме первый элемент- 40
в третьем - 35
делем всем трем элементам - min-height: 40px

во втором итеме первый элемент по высоте 32 пикслелей
во втором итеме первый элемент- 45
в третьем 37
делаем всем трем элементам - min-height: 45px

и тд. элементов может быть много

https://jsfiddle.net/gm9zrbwf/1/

Comments

[Роман Дворянов]

О каких, конкретно, блоках речь в коде на jsfiddle, что из этого должно быть в одинаковых, по высоте, контейнерах?

[zveronol]

Роман Дворянов,
что я имею ввиду

есть враппер
в нем 3 итема
в них по 2 элемента

у первых элементов итема
может быть мин высота 42

у вторых 35

[v3shin]

display: table; - посмотрите в эту сторону.

[zveronol]

v3shin, а отступ я могу задать?
tr td:not(:last-child) {
margin-right: 20px;
}

не работает
https://jsfiddle.net/qk5fa47y/

[v3shin]

zveronol, padding. И стилизовать контент внутри.

Answer 1

[Роман Дворянов]

В общем есть вариант собирать все итемы, брать высоту самого высокого контейнера и вешать всем

function setMinHeight(items) {
  const minHeight = Math.max(...items.map(item => item.offsetHeight));
  itemsArr.map(item => item.style.minHeight = minHeight);
}

const itemsArr = Array.from(document.querySelectorAll('общий селектор или селекторы'));
setMinHeight(itemsArr);

Comments

[zveronol]

так в этом загвоздка
нужно не всем
пример
есть враппер
он флекс
в нем 2 итема
в них по 2 элемента

и получается что первый элемент первого блока 35пикселей
первый элемент второго блока 40пикселей

делаем им мин высоту 40

теперь второй элемент первого блока 25 пикселей
второй элемент второго блока 29пикселей
делаем им мин высоту 29

не знаю понятно ли

[Роман Дворянов]

укажите нужные селекторы, элементы или то по какому признаку вы их определяете в выборе тех итемов, у которых нужна равная высота, если таких, образно говоря, "групп" несколько, запустите функцию в цикле по этим группам

[zveronol]

Роман Дворянов, вот я добавил классы
https://jsfiddle.net/0j5bgkx6/

[Роман Дворянов]

zveronol, не нашел там javascript, попробуйте сохранить свой фидл или дать ссылку, где есть javascript

[zveronol]

Роман Дворянов, я просто показал как я группирую

[Роман Дворянов]

zveronol, я просто написал как высоту в js одинаковую задать

[zveronol]

Роман Дворянов, ага.
это труднее для меня

[Роман Дворянов]

zveronol, понимаю, сам когда то также думал, что бородатые программисты из фильмов, вот это умные чуваки, эти задроты, которые вечерами сидят за компом и пишут код, а я так, самоучка, дилетант, куда мне до них и знаете что?

Борода отросла, пишу код по вечерам ночам и немного днем, в трудовой написано, что работаю старшим разработчиком, это они наверное про возраст, но врядли такие нюансы фиксируются в трудовой. У вас все получится.