The fiddle (it's a skeleton of my actual code): <http://jsfiddle.net/nkipe/6bhee8c8/>  

The code:  

CSS 

```
* 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0; padding: 0;
}
html
{
    height: 100%;
}
body 
{
    height: 100%;
    background: #FEFFFB;
    font-family: arial, verdana;   
}
#layoutContainer 
{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
}

#iframeHeader
{
    width: 100%;
    height: 50px;
    border: 0;
}
#iframeStatusBar
{
    width: 100%;
    height: 15px;
    border: 0;
}
#iframeMainMenu
{
    width: 200px;
    height: 100%;
}
#iframeCenterContent
{
    width: 100%;
    height: 100%;
    top: 65px;
    left: 200px;
    position: fixed;
}
#iframeFooter
{
    width: 100%;
    height: 50px;
    bottom: 0px;
    left: 200px;
    position: fixed;
}

```

HTML 

```
<div id="layoutContainer">
    <iframe id="iframeHeader" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe>
    <iframe id="iframeStatusBar" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe>
    <iframe id="iframeMainMenu" src="#"></iframe>
    <iframe id="iframeCenterContent" src="#"></iframe>
    <iframe id="iframeFooter" src="#"></iframe>            
</div>

```

And when I run my actual code in Chrome, it shows up as grey borders as shown in this image:  

![enter image description here](https://i.stack.imgur.com/8WRVZ.png)