iframe - 如何将div和iframe占据窗口高度的100％？ - Thinbug

如何将div和iframe占据窗口高度的100％？

时间：2011-08-02 20:13:29

标签： iframe html window size

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

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

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

jsfiddle - ＆gt; http://jsfiddle.net/Q3UV2/

CSS

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

HTML

<body>
    <div id="divMenu">Menu</div>
    <iframe id="ifrContent" frameborder="0" src="http://www.ebay.com/"></iframe>
</body>

2 个答案:

答案 0 :(得分：1)

<强> 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>

答案 1 :(得分：0)

将此代码放入您的css：

html, body {
height:100%;
}

将div的高度设置为100％会使其占据父div的高度的100％，因此将div的高度设置为100％并不意味着什么，直到您将其父高度设置为100％为止。