Question

Here is very tricky situation i have tried many things but cant figure it out. I have following iframe:

<div id="content"> <iframe id="iF" name="if" marginwidth="0" marginheight="0" frameborder="0" src=""></iframe>
</div>

Source is entered through jquery to this. Problem is when source is entered it is two big in height and width. So i see two scroll bars. Is there anyway that iframe data will move with main page scrollbar. Rather than adding two different scrollbars.
Here is an image of what i am seeing now:

Answer 1

You need to resize it after the content have been filled, and this can done by using Javascript.

<script type="text/javascript">
    function iframeLoaded()
    {
        var iFrameID = document.getElementById('idIframe');

        if(iFrameID)
        {
            // here you can meke the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
        }   
    }
</script>   


<iframe id="idIframe" onload="iframeLoaded()" ...

Other solution is to add height and width to a persent value, like 100% to get all the width/height of your window, and hide the scroll bars of iframe.