Question

我在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底部的某些区域被切断。

我的问题是，无论如何使用javascript或css显示完整的div而不调整iframe的大小？

Answer 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>

Answer 2

我认为你可以使用css overflow：滚动你的iframe

iframe {
 overflow:scroll;
}

在iframe中显示div

2 个答案: