小提琴(它是我实际代码的骨架):
http://jsfiddle.net/nkipe/6bhee8c8/
代码:
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
当我在Chrome中运行我的实际代码时,它会显示为灰色边框,如下图所示: