Kevin Powell - Community•4mo ago

Help with simple height animation?

https://codepen.io/DovahTheKiin/pen/BabqBGE I want to make second div change it's height and that first one, together with it's content to follow it, but I want to avoid any hard-coded values. something like this Kevin's video: https://www.youtube.com/watch?v=B_n4YONte5A I also need for second div to be glued to the bottom of the body all the time, without absolute units. I remember seeing code something like this for "glued to the bottom" problem.

.container {
  display:grid;
  grid-template-rows: auto 1fr;
}

.container {
  display:grid;
  grid-template-rows: auto 1fr;
}

Kevin Powell

YouTube

The simple trick to transition from height 0 to auto with CSS

Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement! 🔗 Links ✅ Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...

2 Replies

Skriti mož•4mo ago

Did you already try anything (don't see any css)?

Dovah•4mo ago

@Skriti mož Of course. That is why I'm here asking for help. xD

Gaming

Programming

Help with simple height animation?