整页iframe [英] full page iframe
本文介绍了整页iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要一个带有从其他网站显示的标题和iframe的页面。
这里是我使用的：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0严格// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en>
< head>
< style type =text / css>
* {margin：0; padding：0}
html，body {height：100％; width：100％; overflow：hidden}
table {height：100％; width：100 ％; table-layout：static; border-collapse：collapse}
iframe {height：100％; width：100％}
.header2 {border-bottom：1px solid＃000; height：90px; }
.content2 {height：100％}
< / style>
< / head>
< body>
< table>
< tr>
< td class =header2>
asdasdasdasd
< / td>
< / tr>
< tr>
< td class =content2>
< iframe src =http://www.w3schools.comscrolling =autoframeborder =1/>
< / td>
< / tr>
< / table>
< / body>
< / html>
问题在于此代码不显示页脚完整（由于页眉部分）。
解决方案
表伤害了我的眼睛。 位置：绝对对此严重低估。请改用此布局：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>测试版面< /标题>
< style type =text / css>
body，html
{
margin：0;填充：0;身高：100％;溢出：隐藏;
}
#header
{
position：absolute;左：0; top：0;正确：0;身高：90px;背景：红色;
}
#content
{
position：absolute;左：0;正确：0;底部：0; top：90px;背景：蓝色; height：expression（document.body.clientHeight-90）;
}
< / style>
< / head>
< body>
< div id =header>
测试内容
< / div>
< div id =content>
< iframe width =100％height =100％src =startdoc.html/>
< / div>
< / body>
< / html>
在IE6和我以前用过的所有浏览器都测试过的情况下， hacks：）
I need a page with a header and an iframe that show from other site. here is what I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header2 {border-bottom:1px solid #000;height:90px;}
.content2 {height:100%}
</style>
</head>
<body>
<table>
<tr>
<td class="header2">
asdasdasdasd
</td>
</tr>
<tr>
<td class="content2">
<iframe src="http://www.w3schools.com" scrolling="auto" frameborder="1" />
</td>
</tr>
</table>
</body>
</html>
problem is that this code do not show footer complete (90 pixels is out of page because of header part).
解决方案
Tables are hurting my eyes. position: absolute is seriously underrated for this. Try this layout instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#header
{
position:absolute; left: 0; top: 0; right: 0; height: 90px; background: red;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 90px; background: blue; height: expression(document.body.clientHeight-90);
}
</style>
</head>
<body>
<div id="header">
Test content
</div>
<div id="content">
<iframe width="100%" height="100%" src="startdoc.html" />
</div>
</body>
</html>
Bonus points for rendering correctly all the way to IE6 and on every browser I've ever tested with minimal hacks :)
这篇关于整页iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
