iframe Ajuste automático de altura a medida que cambia el contenido
Tengo un iframe como se puede ver en el siguiente enlace;
El iframe es la reserva en línea en el centro de la pantalla. El problema que tengo es que aunque la altura del iframe está bien a medida que se carga la página, lo necesito para ajustar automáticamente la altura a medida que se ajusta el contenido de la página. Por ejemplo, si hago una búsqueda de código postal en la reserva en línea, se crea un menú desplegable y luego el botón "Siguiente paso" no se puede ver.
Lo que necesito que suceda es que cuando el contenido de la reserva en línea cambia, el iframe se ajusta automáticamente a la nueva altura del iframe (dinámicamente), ya que no está cargando ninguna otra página.
He intentado varios scripts diferentes usando jquery para intentar resolver este problema, pero todos parecen solo ajustar automáticamente la altura del iframe cuando la página se carga por primera vez yno a medida que el contenido del iframe cambia.
¿Es esto posible hacer?
El código que tengo en este momento es con una altura establecida en el 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;
}
¡Si alguien me puede ayudar con esto, sería muy apreciado!