`
liuxiang822
  • 浏览: 46752 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

iframe高宽自适应

 
阅读更多 
<!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%}

分享到：
| windows server 2008 产品密钥申请
评论
2 楼 liuxiang822 2012-01-11  
你上下都加了P标签 ，想要高度自适应很简单。给P标签高度加上百分比，然后加上iframe高度百分比等于body的高度百分比就行！
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高度自适应的。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics