Eu tenho um iframe como você pode ver no link a seguir;

http://one2onecars.com

O iframe é a reserva online no centro da tela. O problema que tenho é que, embora a altura do iframe esteja bem quando a página é carregada, eu preciso que de alguma forma ajuste automaticamente a altura à medida que o conteúdo da página se ajusta. Por exemplo, se eu fizer uma pesquisa de código postal na reserva on-line, ele cria um menu suspenso e, em seguida, torna o botão "Próximo passo" não visível.

O que preciso acontecer é que quando o conteúdo da reserva on-line muda, o iframe auto ajusta-se à nova altura do iframe (dinamicamente), pois não está carregando nenhuma outra página.

Eu tentei vários scripts diferentes usando o jquery para tentar resolver esse problema, mas todos eles só parecem ajustar automaticamente a altura do iframe quando a página é carregada pela primeira vez enão conforme o conteúdo do iframe é alterado.

Isso é possível?

O código que tenho no momento é com uma altura definida no momento: -

        <div id="main-online-booking">

            <iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" scrolling="no" frameborder="0"></iframe>

        </div>

#main-online-booking {
    height: 488px;
    border-bottom: 6px #939393 solid;
    border-left: 6px #939393 solid;
    border-right: 6px #939393 solid;
    z-index: 4;
    background-color: #fff;
}


.booking-dimensions {
    width: 620px;
    height: 488px;
}

Se alguém puder me ajudar com isso, eu seria muito apreciado!