首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

iframe高设为100%,可它老超过100%显示?该如何解决

2012-03-22 
iframe高设为100%,可它老超过100%显示?HTML code !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transiti

iframe高设为100%,可它老超过100%显示?

HTML code
 <!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>
<style type="text/css">
*{ margin:0; padding:0;}
html{ padding:0; width:100%; height:100%; overflow:hidden; font-size:12px; font-family:"宋体";}
body{ width: 100%; height: 100%; overflow:hidden;}
/* 页头 */
#header{position:relative; top: 0; background:#006699; width:100%; color: #FFF; height:61px;}
/* 主体 */
#content{width:100%; height:100%;}
/* 左边内容 */
#left{float:left; background:#993300; border-right:#202020 0px solid; border-bottom:#333333 1px solid; color: #FFF; width: 160px; height:100%; overflow:auto;}
/* 右边内容 */
#right{position:relative; top: 0; margin-left:165px; width:auto; height:100%; overflow:auto;}
#right iframe{width:100%; height:100%;}
/* 页尾 */
#footer{margin:20px 0 0 0;padding:10px 0 0 0; position:relative; top: 0; background:#006699; font-size:12px; color: #FFF; line-height:20px; width:100%; height:50px; }
</style>
</head>
<div id="header">header </div>
<div id="content">
  <div id="gap"> </div>
  <div id="left">left </div>
  <div id="right">
    <iframe src="http://www.163.com" name="main" id="main" frameborder="no" scrolling="auto" hidefocus/>
    </iframe>
  </div>
</div>
<div id="footer">footer </div>
</body> </html>


[解决办法]
#content{width:100%; height:100%;}
#header{.... height:61px;}
#footer{.... height:50px; }

3个高度加起来是 100% + 111px

html{ 。。。 overflow:hidden; 。。。} 和 body{ 。。。 overflow:hidden;}
里又有overflow:hidden
把多余部分隐藏了,所以至少有 111px 的内容显示不出来
[解决办法]
你这个问题很典型,值得研究。。。

热点排行