Плавное увеличение высоты блока с неизвестным содержимым

#css #вёрстка

Есть некий div id="container" в котором находится неизвестное количество контента.
Например может быть 1 вложенный div а может быть 10. Свойства контейнера когда он скрыт :

#container{
    max-height: 0;
    transition: all 0.5s ease-out;
    overflow: hidden;
}


Далее мне нужно его плавно развернуть :

#element:checked ~ #container{
    max-height: 500px;
    transition: all 0.5s ease-in;
}


Все нормально работает, но только пока max-height равно 500 или другое точное значение.
Если выставить auto то высота не меняется вообще. Похожий вопрос уже был тут но ответ
подразумевает знание точной высоты div #container а как быть если высота должна быть auto ?



#container {
    max-height: 0;
    transition: all 0.5s ease-out;
    overflow: hidden;
}

#element:checked ~ #container{
    max-height: 300px;
    transition: all 0.5s ease-in;
}



  

  text
  
  

  text
  
  

  text
  





    

Ответы

Ответ 1

вместо % используйте vh - оно отталкивается от высоты окна браузера и часто очень
помогает там, где % не срабатывает.


Ответ 2

Это конечно не то же самое, но можно сотворить что-то такое с трансформом =)



#container {
    transform: translate(0,-50%)scaleY(0);
    transition: 0.5s;
}

#element:checked ~ #container{
   transform: translate(0,0);
}



  

  text
  
  

  text
  
  

  text
  








Ну и вот такой вариант могу предложить



#container {
  overflow: hidden;
}

#container > * {
    transform: translate(0,-100%);
    transition: 0.5s;
}

#element:checked ~ #container > * {
   transform: translate(0,0);
}

  
  

    


      

        text
      
      

        text
      
      

        text
      
        

        text
      
        

        text
      
        

        text
      
        

        text
      
      

        text
      

    
  







Еще можно  max-height: 100vh; (vh = viewport height):



#container {
    max-height: 0;
    transition: all 0.5s ease-out;
    overflow: hidden;
}

#element:checked ~ #container{
    max-height: 100vh;
    transition: all 0.5s ease-in;
}



  

  text
  
  

  text
  
  

  text
  




Ответ 3

Вам и не нужно знать конечную высоту, задайте просто раскрывашке height:auto; и max-height
побольше.



#container {
    height: auto;
    max-height: 0;
    transition: all 0.5s ease-out;
    overflow: hidden;
}

#element:checked ~ #container{
    max-height: 1000px;
    transition: all 0.5s ease-in;
}



  

  text
  
  

  text
  
  

  text
  
  

  text
  
  

  text
  
  

  text
  
  

  text
  
  

  text
  
  

  text
  
  

  text
  
  

  text