Как выровнять несколько разных блоков по высоте?

Question

[Александр]

Здравствуйте. Подскажите пожалуйста, как мне можно решить возникшую проблему. Суть ее в следующем:

Имеется трехуровневое выпадающее меню, в дочерних менюшках второго и третьего уровня может быть любое количество строк. Нужно найти самый высокий среди двух этих уровней список и задать его высоту для остальных. С этой задачей, я более-менее справился, но. По умолчанию эти меню должны быть display:none; и появляться только по наведению курсора на соответствующий пункт.

Так вот, в этом случае у меня приравнивается к нулю высота меню третьего уровня и выровнять получается только по меню второго уровня. Слишком длинные списки просто начинают вылезать за рамки. Для наглядности привожу код своего случая: jsfiddle.net/5pbjzjgk/1

Что нужно изменить/добавить в JS, CSS или HTML что бы все заработало как надо? (Что бы посмотреть как примерно все должно быть, можно убрать в CSS стилях строчку display:none; у .block1 (19 строка))

Answer 1

[Дмитрий Антонов]

jsfiddle.net/5pbjzjgk/3 Лучше в 4 утра не придумал )

Comments

[Александр]

Спасибо! По сути вам можно было не переписывать весь мой код, а только добавить к нему свою последнюю строчку. Ну и подправить CSS. Вот что в итоге у меня получилось: jsfiddle.net/5pbjzjgk/4

Answer 2

[Ken Jee]

Элементы, имеющие display: none; не учитываются в дереве разметки. Поэтому вы и не можите вычислить их высоту, т.к. она не назначена движком браузера. Кажды раз, когда вы, что-то изменяете в дереве элементов, браузер перестраивает весь документ, целиком и полностью.

В вашем случае можно попробовать поиграться со свойством visibility, вместо hidden. Но там тоже есть нюансы.

Answer 3

[Павел Кононенко]

Это сложно признать, но ваша задача решается наилучшим образом с помощью таблиц. Даже без js и тем более без jQuery. Высота каждого td в таблице вычисляется на основании высоты самого высокого td, находящегося в том же tr.