[英]How can I remove the extra iframe space at the bottom?
这是我关于stackoverflow的第一个问题。 我想做的是使用javascript在测试div中创建iframe,并在其中添加html代码。 我也想动态调整iframe的高度。 仅当我将dynamic_div的高度设置为大于150px时,以下代码才对我有用。 如果dynamic_div的高度小于150,它将自动将iframe的高度设置为150。如何解决此问题?
PS:html变量中的html代码是动态的。 因此,我无法更改其中的任何内容。
非常感谢。
<html>
<head>
</head>
<body>
<div id="test" style="border: 1px solid;"></div>
<script text="text/javascript">
var html = "<html><head></head><body><div id=\"container\" style=\"text-align:center;padding:8px 0;background-color:#f0f0f0;border:1px dashed;\"> <div id=\"dynamic_div\" style=\"width:100%;height:50px\">Some Content</div></body></html>";
function ui_aa(element_id,content){ // create an iframe and add txt into it.
var iframe = document.getElementById(element_id).appendChild(document.createElement('iframe')),
doc = iframe.contentWindow.document;
iframe.style.cssText = "width:100%";
iframe.frameBorder = 0;
iframe.scrolling= 'no';
doc.open().write(content);
doc.close();
doc.body.style.cssText = "margin:0px;padding:0px;height:100%";
var height = doc.body.scrollHeight;
iframe.height = height;
};
ui_aa('test',html);
</script>
</body>
</html>
由于您的<div id="container">
自动地,它不会像您的iframe一样高。 添加一些样式。
#container {
height: 100%;
display: block;
}
iframe出于某种未知的原因而获得了一个高度值,我给了它一个高度值(例如0
, doc.body.style.cssText
将高度值覆盖为100%
,因此您不必担心。
function ui_aa(element_id,content){ // create an iframe and add txt into it.
iframe.height= '0';
};
示例JSFiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.