Как установить динамическую высоту содержимого для каждого шага?

Я использую плагин мастера шагов JQuery. Проблема, которую я испытываю, состоит в том, что каждый шаг мастера имеет содержание разной высоты. Css, включенный в примеры для управления высотой содержимого,

.wizard > .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;
}

Я изменил свойства min-height и overflow, но он все еще не выполняет то, что я хочу выполнить. Я хочу, чтобы высота была достаточно высокой, чтобы разместить контент для каждого шага.

Например, скажем, у меня есть 2 поля для шага 1 и 10 полей для шага 2. В примерах контент имеет одинаковую высоту, поэтому он выглядит ужасно, имея гораздо большую высоту, чем это необходимо для двух полей для размещения 10 полей на шаге 2.

Если я удалю свойство min-height, контент не будет отображаться вообще. Для выполнения шагов Jquery требуется фиксированная высота для всех шагов? Я надеюсь, что есть способ сделать динамическую высоту для размещения высоты каждого отдельного шага.

Спасибо

Ответы

.wizard > .content > .body{height:95%;}

stepTitles.eq(state.currentIndex)
  .addClass("current").next(".body").addClass("current");

stepTitles.eq(state.currentIndex).next(".body")
    .each(function () {
    var bodyHeight = $(this).height();
    var padding = $(this).innerHeight() - bodyHeight;
    bodyHeight += padding;
    $(this).after('<div class="' + options.clearFixCssClass + '"></div>');
    $(this).parent().animate({ height: bodyHeight }, "slow");
});