CSS3 Flip Card with Automatic Height

Question

I\'m using a tutorial to create a flip card effect using CSS3 and jQuery and I\'m having issues getting the height to adjust to the content length while having it still flip

Answer 1

You can trick it, by making the .back position absolute and 100% height. And leave the .front position relative.

.front  {position: relative;}
.back       {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

Note, might be useful in some scenarios: add 2 additional elements to the back, for header and footer, and make the footer position absolute and set it to bottom 0.