How can I achieve a slide down effect like jQuery's slideDown, but only using CSS?

Question

There is a problem with CSS3 animations. They do not support the "auto" height property (and width, margins, etc.). What is the best way to create a CSS3 slide down animation without knowing the element's exact height?

The question is similar to this one, but the accepted answer there does not answer the actual question because they do not deal with the problem of calculating the height of the element you wish to slide.

Answer 1

Have you seen this demo I dug up on that answer?
I tried writing my own, but it didn't seem to work.

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});

#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

View on jsFiddle