1

我在 iframe 中有一个 div，当我们单击输入框时会出现该 div。

iframe 看起来像这样

<iframe src='mycontrol.html' width='300' height='50' />

下面是 mycontrol.html 的代码

<div>
    <input type='text' />
    <div style='height:80px;'>
         This will be shown when we click in the above text box.
    </div>
</div>

当用户单击输入框时，我有 javascript 来显示 div，问题是因为这个 div 的高度大于 iframe 的高度并且没有完全显示。由于 iframe，div 底部的某些区域被切割。

我的问题，有没有在不调整 iframe 大小的情况下使用 javascript 或 css 显示完整的 div ？

4

2 回答 2

1

也许这就是你需要的？它并没有完全div摆脱困境，iframe但看起来确实如此。在jsFiddle.net工作演示

在主页中：

#wrapper {
    position: relative;
    z-index: 1000;
}
#frame {
    width: 300px;
    height: 120px;
    margin-bottom: -70px;
}

和 HTML：

<div id="wrapper">
    <iframe id="frame" src="frame.htm" frameborder="0"></iframe>
</div>
<p>Some text below IFRAME in main window.</p>

在 mycontrol.html 中：

BODY {
    overflow: hidden;
}
#div {
    width:100px;
    height: 80px;
    background: #ff0;
    border: 1px solid #000;
    display: none;
}

和 HTML：

<input type="text" onfocus="document.getElementById('div').style.display='block';" onblur="document.getElementById('div').style.display='none'";/>
<div id="div"></div>
于 2012-12-04T15:27:25.160 回答
0

我认为您可以将 css overflow:scroll 用于您的 iframe

iframe {
 overflow:scroll;
}
于 2012-12-04T12:52:55.893 回答