Как растянуть блок с контентом на высоту родителя?

Question

[I'm Yoda]

Как задать height блоку с контентом (.baron) равную высоте родителя (.sub-menu)? Или как присвоить класс для блока (.baron) если его высота превышает 420px?

Превью меню: https://jsfiddle.net/fh65pssz/3/

Хочу сделать так, чтоб при раскрытии блока (.sub-menu), блок (.baron) с пунктами меню либо принимал (style="height: 420px") либо если высота блока (.baron) превышает 420px добавлялся класс (.fixed)

Если есть знатоки, помогите плиз!

Comments

[Сергей Горячев]

Знатоков тут полно, найдут решение.
Другое дело, поймут ли знатоки вашу писанину)
Три раза перечитал, не понял сути)

[I'm Yoda]

Еще раз перечитал все понятно, не знаю почему вы не понимаете. В превью пример приведен подробный и понятный.

[whoisthere]

Леонид: не совсем понятно, на самом деле)

Answer 1

[whoisthere]

.sub-menu {
  min-height: 420px;
}
.baron {
  height: 100%;
}

Если барон будет больше 420px высота увеличится. Вас куда-то в дебри унесло. Если я конечно правильно понял Вас.

Comments

[I'm Yoda]

Если ставить min-height, то выглядит не красиво где 2-3 пункта подменю. Если делаем для .sub-menu {max-height: 420px}, а для .baron {height: 100%;} оно вроде логично, но не работает! Скорее всего плагин Baron Scrollbar понимает только фиксированную высоту.

[I'm Yoda]

А так же пробовал для .baron{max-height: 420px;} ставить, все равно не работает!

[whoisthere]

Леонид: Вам нужна высота автоматическая в зависимости от количества пунктов меню?

[whoisthere]

Леонид: Если Вы хотите ограничить пункты меню в пределах 420px. Вам нужно добавить скрол для этого блока. Если пунктов меню будет больше высоты в 420px появится скрол. https://jsfiddle.net/fh65pssz/5/

[I'm Yoda]

Верно! Хочу ограничить высоту блока с классом (.baron) который является контейнером со скролбаром. Но дело в том, что этот плагин понимает только фиксированную высоту контейнера. По этому необходимо сделать чтоб блок (.baron) принимал высоту блока (.sub-menu) через js. Либо чтоб блок (.baron) получал класс (.baron.fixed) если его высота превышает 420px/

[whoisthere]

Леонид: Посмотрите мой пример. Там скрол появляется как нужно.

[I'm Yoda]

whoisthere: Я увидел ваш пример, но это не то! Надо чтоб у блока (.baron) была фиксированная высота!

[whoisthere]

Леонид: Тогда это скроет пункты меню и вы их никак не увидите без скрола. Смысл добавлять скрипт фиксированную высоту? Если вы можете сразу её прописать?

[I'm Yoda]

whoisthere: могу вам через TeamViewer показать как необходимо сделать!

[Егор Живагин]

Леонид: max-height не работает? Быть такого не может) Просто вы его или для .baron задавайте, а не для ul, либо overflow-y: hidden

[I'm Yoda]

Егор Живагин: не работает max-height!

[Егор Живагин]

Леонид: где? у какого элемента?

[I'm Yoda]

Егор Живагин: прочтите всю переписку выше)

[Егор Живагин]

Леонид: я проверил ещё раз, у меня всё нормально вышло, но как-то некрасиво получилось. Немножко переделал, вам вот это нужно было? !important, поскольку другой max-height перекрывает https://jsfiddle.net/fh65pssz/11/

[I'm Yoda]

Егор Живагин: Спасибо! Не углядел, что у скролера max-height обозначен!

[I'm Yoda]

Леонид: вот результат s016.radikal.ru/i336/1702/ca/9318cfbd8c06.jpg

[Егор Живагин]

Леонид: да не за что)

Answer 2

[Максим Тимофеев]

Высота блока в % работает только если указана высота родителя.
Я бы на вашем месте сделал

.baron {
  max-height: 470px;
}

и поставил на него кастомный скрол какой-то