There is an iframe in a div, and the div is required to display part of the content of the iframe, and the div is required to change proportionally as the browser becomes larger or smaller. How to achieve this? _html/css_WEB-ITnose

There is an iframe in a div. The div is required to display part of the content of the iframe, and the div is required to change proportionally as the browser becomes larger or smaller. How to achieve this?

You can also use javascript to do it, as long as it can be implemented.

Ask the experts to give it a try. If you don’t score enough, you can get extra points!

Reply to discussion (solution)

Is that so?

  <style>html,body{height:100%;}</style><div style="width:50%;height:50%;position:relative;"><iframe src="http://www.baidu.com" style="width:100%;height:100%;position:absolute;top:0px;left:0px;"></iframe></div>

The content displayed by the iframe is controlled by the width, and the div is used as a percentage as the browser becomes larger or smaller,

dc6dce4a544fdca2df29d5ac0ea9906b
frameborder="0" scrolling="no" width="100%" height="100%" src="http://www.baidu.com">065276f04003e4622c4fe6b64f465b88


3f1c4e4b6b16bbbd69b2ee476dc4f83a
window.setInterval(function(){
iFrameHeight()
}, 100);
function iFrameHeight() {

var ifm= document.getElementById("iframeH");
var subWeb = document.frames ? document.frames["iframeH"].document : ifm.contentDocument;
ifm.height = subWeb.body.scrollHeight;


}
2cacc6d41bbb37262a98f745aa00fbf0