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

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

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

怎么让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. 【前端新手】如何学习开发
  2. 下头这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签
  3. css-div居间
  4. CSS3 替不同媒介设置样式的方法（CSS3 Media Queries）
  5. cloudzoom放大镜和CSS的有关问题
  6. 这个要求如何实现！
  7. 十个奇幻的HTML5和Javascript效果
  8. HTML 中字符中横旗杆样式
  9. 怎么实现chrome浏览器 新标签页的效果