iframe高设为100%，可它老超过100%显示？该如何解决
日期：2014-05-17 浏览次数：20605 次
iframe高设为100%，可它老超过100%显示？
------解决方案--------------------
#content{width:100%; height:100%;}
#header{.... height:61px;}
#footer{.... height:50px; }
3个高度加起来是 100% + 111px
但
html{ 。。。 overflow:hidden; 。。。} 和 body{ 。。。 overflow:hidden;}
里又有overflow:hidden
把多余部分隐藏了，所以至少有 111px 的内容显示不出来
------解决方案--------------------
你这个问题很典型，值得研究。。。
- 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 的内容显示不出来
------解决方案--------------------
你这个问题很典型，值得研究。。。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
