当前位置: 代码迷 >> HTML/CSS >> 如何让iframe的高度和宽度可以100%
  详细解决方案

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

热度:10086   发布时间:2013-02-26 00:00:00.0
怎么让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" 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>
  相关解决方案