Как сделать плавное появление блока, и смещение контента ниже, без задания фиксированной высоты?

Question

[MyQuestion]

Добрый день!

В css, для transition, есть такой приём:

.nav {
    height: 0;
    opacity: 0;
    transition: height .4s, opacity .3s;
  }

  .nav.active {
    height: 500px;
    opacity: 1;
  }

При наступление события, плавно выезжает блок, и всё что ниже, так же плавно съезжает вниз.

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

Comments

[Антон Литвиненко]

.slideDown()

[MyQuestion]

Антон Литвиненко,
Спасибо! Попробую)

Answer 1

[Сергей delphinpro]

В идеале следует джаваскриптом высчитывать высоту блока и ставить ее.

Чисто css решение тоже есть, но оно неидеально. Тут вместо height используется max-height с заведомо большим значением, но не слишком превышающим предполагаемую высоту.

Comments

[MyQuestion]

Ок, понял, спасибо!