How do you create auto resizing a iframe when you make your browser smaller?

问题

Does anyone know of a way to auto resize an iframe when you make your browser smaller??

回答1:

You can attach a handler to the window.onresize event, and then resize your IFRAME appropriately.

I prefer jQuery:

$(window).resize(function() {
  $('IFRAME').width($(window).width());

});

回答2:

One option is to specify the <iframe> size in percent.

回答3:

Haven't tried it but I guess you could use a percentage width instead of a fixed width. In that case you should probably add a minimum width and height as well, to avoid that it is getting too small:

iframe
{
   width: 50%;
   height: 50%;
   min-width: 300px;
   min-height: 300px;
}

回答4:

You could as well use this.

Basically it makes use of callResize() in Child page and resizeIframe() in Parent page.

回答5:

You can also do this without JavaScript if you'd like using CSS Media Queries. See this example here:

http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html

They are often used for "responsive design".

来源：https://stackoverflow.com/questions/9432010/how-do-you-create-auto-resizing-a-iframe-when-you-make-your-browser-smaller