# Iframe + fancybox position issue

**URL:** <https://forum.kirupa.com/t/iframe-fancybox-position-issue/329668>\
**Category:** Uncategorized\
**Created:** [September 30, 2012, 11:37am UTC](https://forum.kirupa.com/t/iframe-fancybox-position-issue/329668 "2012-09-30T11:37:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zenor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zenor/32/3634_2.png) [@Zenor](https://forum.kirupa.com/u/Zenor)\
**Post date:** [September 30, 2012, 11:37am UTC](https://forum.kirupa.com/t/iframe-fancybox-position-issue/329668/1 "2012-09-30T11:37:11Z")

</div>

Hello, I am building a website and I have used an iframe for the main content

```auto
<iframe src="main.html" frameborder="0" width="100%" name="mainFrame" id="mainFrame" allowtransparency="true" scrolling="no" onload="iSize()" style="z-index:-1;">Your browser does not support iframes!</iframe>

```

Now, I am using a JS script to resize the iframe based on the iframe content height:

```auto
<script type="text/javascript">
    function iSize(){
    document.getElementById('mainFrame').height = document.getElementById('mainFrame').contentWindow.document.body.scrollHeight + 20;
    document.getElementById('mainFrame').height = document.getElementById('mainFrame').contentDocument.documentElement.scrollHeight + 20;
    }
</script>

```

And this is where the problem begins, on my Photos.html page I use fancybox. When I click on a thumbnail the photo loads in the **middle of the iframe** instead of loading in the middle of the screen(so I have to scroll to see the photo). Is there anything I can do to tell the fancybox position itself based on the browser window instead of iframe?