2

Edit: Answered. transform: scaleY() works acceptably well for my purposes. Sorry for the trouble!

I'm creating some code for a CSS animation triggered with JavaScript. This animation will be applied to a div element, and I want to know a way that I can input a value representing the full height of the div (div height will vary). I can trigger it just fine with the to value set to height: 100px, but that's not what I want.

@keyframes slideIn {
    from {height: 0;}
    to {height: 100%;}
}

Is there any way to represent the full height of an element in CSS?

BobTheAwesome
  • 131
  • 12
  • 4
    you know that the parent needs to have a specified height for this to work? If the parent is body then you need to specify body's height to 100% as well (html tag also) > `html, body {height:100%;}` – Aziz Feb 20 '16 at 15:23
  • You can do multiple ways to achieve the goal. Try using `flex` or `position: absolute; top: 0; bottom: 0`. otherwise animate the `max-height` property or set a fixed height for parent. – Farzad Yousefzadeh Feb 20 '16 at 15:25
  • I'm inserting a div element into the body and I want it to slide in from `0` height to its full height. – BobTheAwesome Feb 20 '16 at 15:30
  • Never mind, never mind, I'll just hack something together in a script tag. – BobTheAwesome Feb 20 '16 at 15:31
  • By full height you mean `auto` which is not animatable, for that you can use the `max-height` property to animate the div where max-height would be a height greater than the maximal height a div will reach. have a look at [how to transition height from 0 to auto](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) – Aziz Feb 20 '16 at 15:32
  • Also, what about trying the `scaleY()` transform property? – Aziz Feb 20 '16 at 15:34
  • If it helps to see my code, here it is: https://www.khanacademy.org/computer-programming/simple-post-ui-w-markdown-work-in-progress/6647559692353536 – BobTheAwesome Feb 20 '16 at 15:36
  • Lines `27` and `295` are of interest. – BobTheAwesome Feb 20 '16 at 15:37
  • It would help to create a simplified version of the code, not hundreds of lines most of which have nothing to do with the problem. – Mr Lister Feb 20 '16 at 15:38
  • Anyway, the height of the body is not automatically the height of the window. If you want it to be, put `html, body {height:100%}` in your stylesheet. – Mr Lister Feb 20 '16 at 15:39
  • That doesn't seem to make any difference. – BobTheAwesome Feb 20 '16 at 15:40

2 Answers2

1

The height of post div is not fixed, it's dynamic. 100% makes the div fill the total height of its parent. What you really mean is animating a div from 0 height to auto height, which is not animatable at the moment. You can try other approaches like max-height or scaleY() for a pure CSS solution. Alternatively you can run the calculations with JavaScript.

Max-height

@keyframes slideIn {
    from {max-height: 0px;}
    to {max-height: 1000px;}
}

Drawbacks

  • Transition time inconsistencies
  • Limits box height

Vertical scale 

@keyframes slideIn {
    from {transform: scaleY(0);}
    to {transform: scaleY(1);}
}

Drawbacks

  • Does not "slide" the space around div
  • May override other transform effects
Aziz
  • 7,685
  • 3
  • 31
  • 54
  • Ah, I see. Thank you for this, I'm very naive and I appreciate your help a lot. Sorry if I was trouble, the latter solution works well as long as the transition length is not too slow. – BobTheAwesome Feb 20 '16 at 16:02
1

If you don't (want to) know about the element height up front and 'grow' it to become the height it would normally occupy, you cannot use height: 100% as this would make the element occupy 100% of its parent element height.

You can, however tell it may use N<unit> in size (where N<unit> is an arbitrary value like 10000px or 1000em, or whatever floats your boat).

@keyframes slideIn {
  from {max- height: 0;}
  to {max-height: 100%;}
}

But in order for this to work, you will also need some other properties set (outside the animation):

height: auto;
overflow: hidden;


@keyframes woot {
  from { max-height: 0; }
  to   { max-height: 100em; }
}

.example1 {
  max-height: 1em;
  overflow: hidden;
  transition: max-height 5s;
}
.example1:hover {
  max-height: 100em;
}

.example2 {
  overflow: hidden;
  animation: woot 5s infinite alternate;
}
<div class=container>
  <div class=example1>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et volutpat lectus, ac hendrerit dui. Donec a vehicula nunc. Integer eleifend blandit libero vitae porttitor. In auctor odio a diam commodo dignissim. Donec vitae nisi fermentum, hendrerit augue at, sagittis erat. Mauris at consectetur sem. Duis ligula metus, fermentum vel vulputate vitae, lacinia nec turpis. Sed nec nibh porttitor, congue neque nec, laoreet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis mi imperdiet dignissim suscipit. Proin dictum varius velit eu eleifend. Vivamus imperdiet eleifend tortor, sit amet mollis leo auctor a. Sed condimentum nisi tortor, quis interdum sapien dignissim sed. Sed interdum, justo a ultrices sodales, risus nunc ultricies eros, et tempor nisl elit sed eros.
  </div>

  <br />
  
  <div class=example2>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et volutpat lectus, ac hendrerit dui. Donec a vehicula nunc. Integer eleifend blandit libero vitae porttitor. In auctor odio a diam commodo dignissim. Donec vitae nisi fermentum, hendrerit augue at, sagittis erat. Mauris at consectetur sem. Duis ligula metus, fermentum vel vulputate vitae, lacinia nec turpis. Sed nec nibh porttitor, congue neque nec, laoreet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis mi imperdiet dignissim suscipit. Proin dictum varius velit eu eleifend. Vivamus imperdiet eleifend tortor, sit amet mollis leo auctor a. Sed condimentum nisi tortor, quis interdum sapien dignissim sed. Sed interdum, justo a ultrices sodales, risus nunc ultricies eros, et tempor nisl elit sed eros.
  </div>

</div>

There is one catch though, you will need to exaggerate the max-height value to the point where you are always certain the contents will fit, and it is the full value of said max-height that counts for the duration of the animation, not just the visible portion.

Rogier Spieker
  • 4,087
  • 2
  • 22
  • 25