<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe高宽自适应</title> <style> html,body,.i_a{height:100%} body{margin:0} .i_a{width:100%;border:none} </style> </head> <body> <iframe src="img_test.html" class="i_a"></iframe> </body> </html>
?
注意点:html,body{height:100%}
1 楼
and80506
2012-01-11
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
<style>
html,body,.i_a{height:100%}
body{margin:0}
.i_a{width:100%;border:none}
</style>
</head>
<body>
<p>我是首页顶部</p>
<iframe src="http://www.iwaimai.net" class="i_a"></iframe>
<p>我是底部</p>
</body>
</html>
这个再测下看,会有滚动条的。 纯css是无法实现iframe高度自适应的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
<style>
html,body,.i_a{height:100%}
body{margin:0}
.i_a{width:100%;border:none}
</style>
</head>
<body>
<p>我是首页顶部</p>
<iframe src="http://www.iwaimai.net" class="i_a"></iframe>
<p>我是底部</p>
</body>
</html>
这个再测下看,会有滚动条的。 纯css是无法实现iframe高度自适应的。
2 楼
liuxiang822
2012-01-11
你上下都加了P标签 ,想要高度自适应很简单。给P标签高度加上百分比,然后加上iframe高度百分比等于body的高度百分比就行!