我如何放置占窗户高度100%的div和iframe？

我想用带有div（菜单）和iframe（内容）的页面替换框架集页面

我正在尝试下面的代码，但iFrame占据了整个窗口空间，包括菜单，创建了一个滚动条

如何使iFrame仅覆盖窗口的剩余空间

jsfiddle->

CSS

正文{
背景色：黑色；
边际：0px；
溢出：自动；
}
#divMenu{
顶部：0px；
左：0px；
高度：100px；
宽度：100%；
背景颜色：灰色；
}
#IFR内容{
位置：绝对位置；
宽度：100%；
身高：100%；
}

HTML

菜单

将此代码放入css：

html, body {
height:100%;
}

---

将div的高度设置为100%会使其占据父div高度的100%，因此，在将其父div的高度设置为100%之前，将div的高度设置为100%并没有任何意义。

将此代码放入css中：

html, body {
height:100%;
}

将div的高度设置为100%会使其占据父div高度的100%，因此，在将其父div的高度设置为100%之前，将div的高度设置为100%并没有任何意义。

CSS

body {
    background-color:Black;
    margin:0px;
    overflow:hidden;
}
#divMenu {
    position:absolute;
    top:0px;
    left:0px;
    height: 100px;
    width:100%;
    background-color:Gray;
}
#divConteudo {
    position:absolute;
    width:100%;
    bottom:0px;
    top:100px;
    background-color:#0ff;
}

HTML

<div id="divMenu">Menu</div>
<div id="divConteudo">
    <iframe id="ifrConteudo" frameborder="0" src="http://www.ebay.com/" width="100%" height="100%" style="background-color:#fff"></iframe>
</div>

菜单

CSS

body {
    background-color:Black;
    margin:0px;
    overflow:hidden;
}
#divMenu {
    position:absolute;
    top:0px;
    left:0px;
    height: 100px;
    width:100%;
    background-color:Gray;
}
#divConteudo {
    position:absolute;
    width:100%;
    bottom:0px;
    top:100px;
    background-color:#0ff;
}

HTML

<div id="divMenu">Menu</div>
<div id="divConteudo">
    <iframe id="ifrConteudo" frameborder="0" src="http://www.ebay.com/" width="100%" height="100%" style="background-color:#fff"></iframe>
</div>

菜单