1. 爱易网页
  2. HTML教程
  3. 如何让iframe的高度和宽度可以100%

如何让iframe的高度和宽度可以100%

日期：2014-05-17　 浏览次数：21495 次

怎么让iframe的高度和宽度可以100%
html的代码如下，其中有2个div，一个宽度是200px。另一个div里有个Iframe，不论我怎么设置样式都不能让这个Iframe的宽度自动达到100%，只能设置个定值。现在默认的Iframe宽度和高度都很小，大概只有200px。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

	<title></title>

	<style type="text/css">

        html, body

        {

            width: 100%;

            height: 100%;

        }

  </style>	

</head>



<body>

<div class="dtree" style="position: absolute; left: 0px; top: 0px; width: 200px;  height: 100%; padding: 5px; overflow: auto;">



</div>



<div style="position: absolute; left: 205px; top: 10px;" width="100%" height="100%">

	<Iframe name="tt" style="height=100%; width=80%" src="" marginwidth="1" marginheight="1"	scrolling="yes" frameborder="10"></Iframe>

</div>

</body>

</html>

------解决方案--------------------
<iframe  name="right" id="center_cent" src="center/center0.html" width="100%" frameborder="0" onload=' this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";  '></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=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<link type="text/css" href="css.css" rel="stylesheet" />
</head>

<style type="text/css">
         html, body
        {
            width: 100%;
            height: 100%;
        }
  </style>  
<body>



<div class="dtree" style="position: absolute; left: 0px; top: 0px; width: 200px;  height: 100%; padding: 5px; overflow: auto;">
 
</div>
 
<div style="position: absolute; left: 205px; top: 10px; width:100%; height:100%" >
    <Iframe name="tt" style="height:100%; width:80%" src="" marginwidth="1" marginheight="1"    scrolling="yes" frameborder="10"></Iframe>
</div>
</body>
</html>

相关资料更多>

  1. Javascript跟CSS浏览器兼容总结
  2. html温习3：meta
  3. HTML 标志一览
  4. Email地址在网页中的维护
  5. 有没有可以连css代码一起自动修改的css图片合并工具解决办法
  6. 关于CAS单点登录的SSL证书有关问题
  7. CSS零基础学习札记(一)
  8. 怎么使连续的英文字母自动折断
  9. 求解，关于blockid是什么意思？解决方案