Cambiar el tamaño del ancho de un iframe en el tamaño de la ventana

Quiero poner un iframe al lado de una barra lateral. La barra lateral tiene una constante de 250px y quiero que el ancho del iframe llene el rest de la pantalla. Entonces su ancho sería el tamaño de la ventana menos 250px. Y necesitaría esto para cambiar dinámicamente. Me quedo con mi código existente.

$(window).resize(function() { $('iframe').prepend(width:$(window).width()px;); });  

Este es el javascript y el iframe. ¿Qué estoy haciendo mal?

Usa este JS:

 $(function() { var newwidth = $(window).width() - 250; $('iframe').css({width: newwidth+'px'}); }); $(window).resize(function() { var newwidth = $(window).width() - 250; $('iframe').css({width: newwidth+'px'}); }); 

También debe hacer la posición DIV circundante: relativa para hacer uso del posicionamiento absoluto.

Esto funcionará para llenar cualquier espacio que tenga de manera receptiva y mantener el tamaño original si la pantalla es aún mayor: https://jsfiddle.net/koaab543/2/

Estoy usando la altura y el ancho originales para calcular proporciones. Luego, obtiene el ancho actual que está limitado al tamaño del espacio con css, y obtiene una nueva altura a partir de eso.

alto / ancho = x / ancho actual

 function responseveIframe() { $('iframe').height( $('iframe').attr("height") / $('iframe').attr("width") * $('iframe').width() ); } responseveIframe(); $(window).resize(function() { responseveIframe(); }); 
 iframe { max-width: 100%; }