如何刪除底部的多余iframe空間？

Question

這是我關於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>

Answer 1

由於您的<div id="container">

自動地，它不會像您的iframe一樣高。 添加一些樣式。

#container {
    height: 100%;
    display: block;
}

Answer 2

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

如何刪除底部的多余iframe空間？

問題描述

2 個解決方案

解決方案1
0 2015-02-04 21:19:06

解決方案2
0 已采納 2015-02-04 21:28:01

如何刪除底部的多余iframe空間？

問題描述

2 個解決方案

解決方案1 0 2015-02-04 21:19:06

解決方案2 0 已采納 2015-02-04 21:28:01

解決方案1
0 2015-02-04 21:19:06

解決方案2
0 已采納 2015-02-04 21:28:01