1

入力ボックスをクリックすると表示される iframe に 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>

ユーザーが入力ボックスをクリックしたときに div を表示する JavaScript がありますが、問題は、この 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

iframe に css overflow:scroll を使用できると思います

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