An object’s height defines its position on the page but does not cater for scrolling up or down. This is where max-height comes into play for transitioning. Let’s look at the code below for a list that is to transition with scrolling. This may not necessarily be the solution but it is a convenient workaround that can still yield the desired effect.
Now the content can be placed within a DIV container.
Another way of approaching this problem is to use ScaleY. It will work well on CSS3-capable browsers but may not work on Internet Explorer versions before IE9.
The CSS3 Code is as follows:
A DIV container will not be needed in this case. Here is the HTML code:
However, this approach is not ideal. The transformed object behaves like a relatively positioned object. Nevertheless it is worth considering as an alternative.