Как совладать, или чем заменить свойство min-height в данном случае?

Question

[Muranx]

Здравствуйте, вот с этим кодом мне нужно помочь тык! суть : есть header (click me !) по клику на который выдает подменю с подпунктами! Ниже хэдера расположен слайдер, который мне нужно скрывать, ну чтобы при выпадении меню слайдер не отвлекал, а полностью закрывался выпадающей менюшкой! Соответственно мне нужно чтобы высота выпадающей менюшки была не меньше чем высота слидера, НО ещё мне нужно чтобы выпадающая менюшка изменяла размер в соотвествии со списком внутри неё, т.е. если список состоит из 3х пунктов, там всё ок, и даже применяя min-height : к выпадающей менюшке можно сделать всё красиво, НО со временем список в выпадающей будет расширяться, и мне нужно чтобы в соотвествии с этим и менюшка увеличивалась, и чтобы я каждый раз не залазил в css чтобы изменить размер менюшки, при добавлении нового айтема в список! Короче нужно сделать так, чтобы
1) менюшка закрывала слайдер в любом случае (вроде с этим пока я справился)
2) и она расширялась если конент в ней требует этого !
3 bodus) Ну и если решение будет очень простым, было бы не плохо ещё анимировать свойство height при выпадании менюшки, т.к. opacity как то не очень, а при попытке анимировать height получается что ничего не получается красиво

Answer 1

[mahmudchon]

height в auto тут:

input:checked + .toggled{
  height: auto;
  min-height: 150px;
  opacity: 1;
}

https://codepen.io/anton-marinin/pen/OJbVbeM

Comments

[Muranx]

mahmudchon, :(( seriously? Т.е. применяя height: auto браузер автоматически высчитывает высоту блока исходя из высоты контента?

[mahmudchon]

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

[mahmudchon]

Muranx, еще как пример доля понимания. Чтобы задать динамическую ширину, мы можем сделать так:

width: 100%
max-width: 25%;

Изначально задаем блоку, например, 100% ширину, но ограничиваем максимум до 25%. По итогу на разных устройствах будет по разному, в зависимости от разрешения экрана. Тут связка height и max-height работают также динамично. Логика не сложная.

Еще важно понимать приоритет. Параметры, указанные ниже - более приоритетные.