title: How to set a dynamic height on content for each step?
body: <p>I'm using Jquery steps wizard plugin. The problem I am having is that each step of the wizard has content of a different height. The css included with the examples to control the height for the content is </p>
  
  <pre><code>.wizard &gt; .content
  {
      background: #eee;
      display: block;
      margin: 0.5em;
      min-height: 35em;
      overflow: hidden;
      position: relative;
      width: auto;
  
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  </code></pre>
  
  <p>I have tweaked the min-height and overflow properties, but it still doesn't do what I want to accomplish. What I want is the height to be only high enough to accommodate the content for each step. </p>
  
  <p>For example, say I have 2 fields for step 1 and 10 fields for step 2. In the examples the content is all the same height so it looks terrible having a much larger height than is necessary for the 2 fields to accommodate the 10 fields on step 2. </p>
  
  <p>If I remove the min-height property, no content shows at all. Does Jquery steps require a fixed height to work for all steps? I'm hoping there is a way to make the height dynamic to accommodate the height of each individual step.</p>
  
  <p>Thank you</p>