Home > Article > Web Front-end > div内iframe无法自适应宽度_html/css_WEB-ITnose
div内iframe无法自适应宽度_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:421589browse
这是我的页面：
<body style="height:100%width:100%;overflow:hidden;" onLoad="onload();"><div style="margin:0;padding:0;border:0px;height:100%;width:100%;position:absolute;"> <div class="top"> <div class="logo"></div> <div class="top_right"><a href="">首页</a> | <a href="">帮助</a> | <a href="javascript:;">退出</a></div> </div> <div id="menu" style=" border:0px;padding:0; margin-top:-1px;width:75px;height:100%;float:left;"> <div class="left_1" style="margin:0px; padding:0px; border:0px; height:100%"> <ul> <li id="li1"><img id="pgjl" src="images/pgjl_green.png" style="max-width:90%" style="max-width:90%" onclick="menuclick(1);" style="cursor:pointer;"/ alt="div内iframe无法自适应宽度_html/css_WEB-ITnose" ></li> <li id="li2"><img id="pgy" src="images/pgy.png" style="max-width:90%" style="max-width:90%" onclick="menuclick(2);" style="cursor:pointer;"/ alt="div内iframe无法自适应宽度_html/css_WEB-ITnose" ></li> <li id="li3"><img id="tjfx" src="images/tjfx.png" style="max-width:90%" style="max-width:90%" onclick="menuclick(3);" style="cursor:pointer;"/ alt="div内iframe无法自适应宽度_html/css_WEB-ITnose" ></li> <li id="li4"><img id="kh" src="images/kh.png" style="max-width:90%" style="max-width:90%" onclick="menuclick(4);" style="cursor:pointer;"/ alt="div内iframe无法自适应宽度_html/css_WEB-ITnose" ></li> <li id="li5"><img id="xtgl" src="images/xtgl.png" style="max-width:90%" style="max-width:90%" onclick="menuclick(5);" style="cursor:pointer;"/ alt="div内iframe无法自适应宽度_html/css_WEB-ITnose" ></li> </ul> </div> </div> <div id="left" style=" border-left:0px;margin-left:-2px;margin-top:-1px;padding:0;height:100%;width:214px;position:relative;float:left;border:1px solid #CCC;"> <iframe id="LeftFrame" name="LeftFrame" width="100%" height="100%" src="page/jk/menu.html" frameborder="0"scrolling="no" noresize="noresize"> 浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。 </iframe> </div> <div id="image" style="float:left;position:relative;border:0px"> <img src="images/right.png" id="img_menu" title="关闭左栏" style="max-width:90%"/ alt="div内iframe无法自适应宽度_html/css_WEB-ITnose" > </div> <div id="centerdiv" style="height:100%;width:80%;overflow:auto;border:0px;float:left;overflow:hidden; position:relative"> <iframe id="frameMap" name="frameMap" style="max-width:90%" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" src="" style="float:left; position:relative;"></iframe> </div></div></body>
图1
图2
最下面的一个id为"frameMap"的iframe无法自适应宽度，如果在外部div指定宽度为100%后，下面这个iframe就看不到了。
当把左边的div隐藏后这个iframe只是位置向左浮动了，宽度并没有自适应。请教
回复讨论(解决方案)
想iframe宽度自适应，最好用JS
想iframe宽度自适应，最好用JS
js要怎么做？iframe不固定宽度看不到，固定宽度后不能拉伸，而且当浏览器变下后也看不到 了
想iframe宽度自适应，最好用JS
js要怎么做？iframe不固定宽度看不到，固定宽度后不能拉伸，而且当浏览器变下后也看不到 了
使用jquery方法，假设你的框架iframe的id为theFrame
function setSize(){
$('#theFrame').css("width",$(window).width());
}
//页面加载时设框架款宽度
$(document).ready(function (){
setSize();
});
//人工拖扯窗口大小时，重设框架款宽度
$(window).resize(function () {
setSize();
});
我的 http://www.coding99.com/fe/show_48.html 可以看看 互相学习
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：常见网站CSS样式重置_html/css_WEB-ITnoseNext article：网页元素CSS居中实现完整攻略_html/css_WEB-ITnose