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

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

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

怎么让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. HTML资料中Include
  2. 带标题的凹线的框框解决思路
  3. Tag的自定义类
  4. 关于showModalDialog的IE缓存的疑问,该如何处理
  5. 初探 HTML 组件 - HTC 概述_HTML综合技巧_HtmlCss教程
  6. html中将文字纵向展示
  7. Ext设立Ext.form.Label的html
  8. 怎么使div的高度自动适应页面的高度，同时div四周和页面有一定的间隔
  9. 《HTML 五和样式应用指南》背后的故事