2 replies

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;
}

YouTubeKevin Powell

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-...

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

KP-C

Kevin Powell - Community•3y ago•

2 replies

Dovah

Help with simple height animation?

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

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

YouTubeKevin Powell

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

Links

Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...

Help with simple height animation?

Similar Threads

Help with simple height animation?

Similar Threads

Similar Threads

Similar Threads