asp.net 后台管理用iframe做的框架，但是在宽屏与窄屏之间显示的不是特别好，有很大差距，
这个是在窄屏下显示正常，宽屏下右边有一个空白，显的很不协调
以下是html代码:
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="4" id="top" height="81px" ><iframe height="81px" width="100%" border="0" scrolling="no" frameborder="0" src="top.aspx" name="topFrame" id="topFrame"></iframe></td></tr><tr><%--<td width="8px" background="images/main_29.gif"></td>--%><td width="195px" height="660px" valign="top" id="left"><iframe height="100%" width="100%" frameborder="0" src="Left.aspx" name="leftFrame" id="leftFrame"></iframe></td><td width="11px" background="images/main_27.gif"><img alt="隐藏菜单" src="../image/main_30.gif" onclick="return closeunit_onclick()" id="closeunit"/></td><td valign="top" class="style1" height="680px"><iframe width="100%" style="max-width:90%" frameborder="0" src="AdminHome.aspx" name="rightFrame" id="rightFrame" scrolling="auto" ><!--onload="iFrameHeight()"--></iframe></td><td width="7px" background="images/main_32.gif"></td></tr><%--<tr><td colspan="4" height="67px" ><iframe scrolling="no" height="100%" width="100%" border="0" frameborder="0" src="down.aspx" name="bottomFrame" id="bottomFrame"></iframe></td></tr>--%></table>
宽度动态计算
你class给个菜单导航一个max-widht,别让他超出； 按道理来说你导航菜单给了固定值一般不会出现空白的 有可能是你其他样式的问题 。
我发现是右侧ifram宽度不能动态调整的原因，网上找了一些代码，不管用
<script type="text/javascript"> window.onload = function() { var a = document.body.clientWidth - 195; //取得iframe框架的实际宽度// alert(a); //弹出数值测试 //document.getElementById("rightFrame").style.width = a + "px"; document.getElementById("rightFrame").style.width = a + "px"; }</script><iframe scrolling="auto" name="rightFrame" src="AdminHome.aspx" frameborder="0" height="100%" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>556?fdh:556)" width="100%"></iframe>
问题解决了，代码贴出来，分享一下:
html代码如下，注意宽高要设为auto
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="4" id="top" height="81px" ><iframe height="81px" width="100%" border="0" scrolling="no" frameborder="0" src="top.aspx" name="topFrame" id="topFrame"></iframe></td></tr><tr><td width="195px" valign="top" id="left" style="height:auto"><iframe height="100%" width="100%" frameborder="0" src="Left.aspx" name="leftFrame" id="leftFrame"></iframe></td><td width="11px" background="images/main_27.gif"><img alt="隐藏菜单" src="../image/main_30.gif" onclick="return closeunit_onclick()" id="closeunit"/></td><td valign="top" class="style1" style="max-width:90%"><iframe width="100%" style="max-width:90%" frameborder="0" src="AdminHome.aspx" name="rightFrame" id="rightFrame" scrolling="auto" ></iframe></td></tr></table>
<script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //结果输出至两个文本框 // document.form1.availHeight.value = winHeight; //document.form1.availWidth.value = winWidth; document.all("rightFrame").width = winWidth - 215; document.all("rightFrame").height = winHeight - 80; document.all("leftFrame").height = winHeight - 80;// alert(document.all("rightFrame").width +"-"+ winWidth); } findDimensions(); //调用函数，获取数值 window.onresize = findDimensions; //--> </script>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
986
收藏
