日期:2014-05-16  浏览次数:20602 次

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></title>
<link rel="stylesheet" href="style/base.css" type="text/css" />
<link rel="stylesheet" href="style/main.css" type="text/css" />
<script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
<style>
body {margin:0px; padding:0px; font-size:12px; color:#333;  width:100%; height:100%; background:#f5f6f8; }
body, html{ height:100%; width:100%;  }
div,ul,li,h2,h3,h4,dl,dd,dt,tr,td,span,label,table{margin:0; padding:0;}
ul,li{list-style:none;}
.frame { height:100%; background:#ffffff;  }
#menu { width:798px; background:#243b60;  height:40px;color:#FFF; margin-bottom:20px;}
#menu ul li { width:115px; float:left; text-align:center;height:40px; line-height:40px; cursor:pointer; }
</style>
</head>
<body onload="main()">
<div id="Top">
<div class="header">
       <div class="logo"></div>
       <div class="top_name">欢迎您:<span id="username">adminadmin</span><span id="logout">退出</span></div>
</div>
</div>

<div id="mainContent">
   <div id="main_left">
       <!--左边菜单导航-->
   </div><!----main_left--->
   <div id="main_right">
       <div id="menu">
            <ul >
                 <li>基本信息</li>
                 <li>服务信息</li>
                 <li>关于我们</li>
                 <li>联系我们</li>
           </ul>
      </div>
  <iframe scrolling="no" class="frame" frameborder="0" name="frame" id="frame"  src="main.htm" width="100%"  height="100%"  ></iframe>
</div>
</div>
</body>
</html>

请问main.htm页面如果内容很多的话,iframe 下面就会很多内容不显示,scrolling="auto"的话,iframe 就会出现滚动条,请问如果内容多iframe 可以不出现滚动条,而是最外面有个滚动条,可以拉到最下面看main.htm全部内容吗。谢谢
------解决方案--------------------
iframe 的高度自适应问题。 <iframe  name="" id="" src="" width="100%" frameborder="0" onload=' this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";  '></iframe>
------解决方案--------------------
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)