iframe inside div cut off content

Question

i have an iframe inside a div. the thing is, the iframe have an expanding menu (expands vertically) inside it. so, the height of the iframe will be dynamic, depending on what item is expanded. when i expand it, it will cut off and not show. below is the code for the div and the iframe.

 <div class="camera">
<iframe name="ifra" id="ifra"  title ="iframe" src="pages/whitef.html" frameBorder=0 scrolling="no"></iframe>
</div>

this is the css for both item.

iframe#ifra{
position: relative;
width: 810px;
min-height: 750px;
height:100%;
margin-top: -40px;
z-index: 1;
border:none;
overflow:hidden;
}
.camera {
height: 100%;
}

what i want to achieve is that the iframe will expand according to the expanded menu and also not being cut off.

Answer 1

Answer is in your CSS,

you may write this

overflow-y:scroll; //that will create a scroll in the iframe the content will not be hidden,

while you write OVERFLOW: HIDDEN; it will take the contenr increase in overflow and will cut down, will not shown.

Edit : for new link

Refer Old conversation for the same

http://stackoverflow.com/questions/934323/control-iframe-height-with-jquery

that will do :)

Answer 2

ok this plug-in is out there to do what you requested, but it works only if the iframe src is in your domain.

there is also an article on css tricks you might want to look at.