Streaming live at 10am (PST)

Need help with Percentage Height Transitions

I was trying to create a div that slides open vertically and noticed that the transition only works when you define the vertical height in absolute pixels and will not work with percentages.

For example, I have a div that is set to 0px on page load. When a user clicks a button I want that div to expand to 100% height. When I define this as a percentage, the div just opens without a transition. The transition only works when I define it in absolute pixels.

I want to do this as a percentage because I’m planning to duplicate this interaction for several elements on the page – all of which have a different height. If I set it to 100%, I don’t have to duplicate and modify each interaction to the exact pixel (which will change anyway depending on mobile vs desktop). Please see videos below for a better explanation.

Height defined by percentage:

Height defined by pixels:

Hi @DavidB

I think I know what you mean and i know how to fix it, but to be a 100% sure could you post your read-only link? Here is how:

For now, does setting the height to auto instead of 100% work?

1 Like

Ah, yes. Setting height to “auto” does exactly what I was looking for. Not sure why I hadn’t thought about that. Thank you!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.