Resize iframe until there is no scrollbar(fit content)
I have a basic layout table, with 4 rows. Header - Navigation - iframe - footer. What I want to achieve is this:
Make the body height(in that case the table row the iframe is in) to fit the iframe content height. The iframe just loads some other html pages I've made.
So, the main index.html body scroller(overflow) will be used to scroll the iframe in that case. Is that possible?
If it's not possible to increase the table row height to iframe content height I can just place it inside a div instead.
Unfortunately you can't do it in css/html. You must use some javascript.
If this is your main.html...
<html>
<body>
<table width="100%" border=1>
<tr><td>Header</td></tr>
<tr><td>Navigation</td></tr>
<tr><td>
<iframe src="iframe.html">
</iframe>
</td></tr>
<tr><td>footer</td></tr>
</table>
</body>
</html>
put this in the iframe.html...
<script type='text/javascript'>
var num=Math.ceil(Math.random()*50);
while(num-- > 0)
document.write("num="+num+"<br/>");
window.parent.onload=function(){
var parent=this.document.getElementsByTagName("IFRAME")[0];
var elem=document.documentElement;
parent.style.height=elem.scrollHeight+"px";
parent.style.width=elem.scrollWidth+"px";
}
</script>
it writes a random number of lines to the document, then resizes itself based on its height.
http://frank.bridgewater.edu/test/iframeResize/
链接地址: http://www.djcxy.com/p/89906.html