html - 在显示中拉伸 HTML5 中的 iframe：已修复

Question

我试图将 iframe 拉伸到所有页面，我在下一篇文章中做了

https://stackoverflow.com/a/7011716

但在框架下方，我想添加一些按钮，如下所示：

<div id="wrap">
    <iframe src="..." frameborder="0" id="iframe"></iframe>

    <p style="height: 25px;">
        <button ... />
        <button ... />
    <p>
</div>

但是 iframe 一直覆盖所有网页，我无法显示小的

直到使用 25px 的 iframe 的底部或下方。

Answer 1

改变这个：

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }

对此：

#wrap { position:fixed; left:0; width:100%; top:0; bottom : 35px; }

演示：http: //jsfiddle.net/4BJ7f/

Answer 2

在#wrap 和样式绝对位置内添加按钮块。

html:

<div id="wrap">
    <iframe src="http://www.yahoo.com/" id="iframe"></iframe>
    <div id="buttons">
        <button>Button</button>
        <button>Button</button>
    <div>
</div>

CSS：

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; border:0}
#buttons {position: absolute; bottom: 0;height: 25px;}

http://jsfiddle.net/SQ6Fq/

Answer 3

然后尝试使iframe高度不是 100%。让它更小;）看看这里- 它的工作。