div를 iframe에 표시합니다.

Question

입력 상자를 클릭하면 나타나는 iframe에 div가 있습니다. 다음은이

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

이 mycontrol.html에 대한 코드가 같은

은 iframe은

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

나는 사용자가 입력 상자를 클릭 할 때 사업부를 표시하는 자바 스크립트가, 문제가 보이는이 DIV 이후 높이가 iframe의 높이보다 높으며 완전히 표시되지 않습니다. div의 하단에서 iframe으로 인해 일부 영역이 잘립니다.

내 질문에, 어쨌든 iframe의 크기를 조정하지 않고 javascript 또는 CSS로 전체 div를 표시 할 수 있습니까 ??

Answer 1

난 당신이 CSS를 오버 플로우를 사용할 수 있다고 생각 : 당신은 iframe

iframe { 
overflow:scroll; 
} 

Answer 2

에 대한 스크롤 어쩌면 이것은 당신이 필요로 무엇입니까? 정확히 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>