Question

我正在考虑在我的XHTML 1.0严格网站上使用frameset，但我注意到使用HTML5时，frameset功能已过时，应使用iframe代替。

我需要在我的网站中加载一个外国网站，我的网站只占据屏幕的最顶部（如果它不妨碍滚动，它会很好，例如看起来好像我的顶部我的网站实际上是国外网站中的iframe。）

如何使用HTML5 iframe执行此操作？我是否可以将height的{{1}}设置为iframe中加载的文档的完整大小，以及iframe到全屏宽度？< / strong>我自己的网站顶部只有一个小的单行菜单;整个屏幕必须专用于width否则。

没有JavaScript，必须只支持HTML5（可能只有一些小CSS，但没有什么重要的，因为它必须在iframe / lynx等浏览器中运行。

Answer 1

使用position fixed和absolute的组合。

Example：

<div id="myHeader">My site portion</div>
<div id="myWrapper"><iframe id="myIframe" src="data:text/html;charset=utf-8,<div style='position:absolute;height:100%;width:100%;background-color:red;'>other Site</div>"></iframe></div>


body {
    margin: 0 0 0 0;
}

#myHeader {
    position: fixed;
    top: 0;
    height: 100px;
    width: 100%;
}

#myWrapper {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
}

#myIframe {
    height: 100%;
    width: 100%;
}

几乎全屏的html5 iframe？

1 个答案: