iframe框架如何适应不同分辨率的浏览器_html/css_WEB-ITnose

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 src="/static/imghw/default1.png"  data-src="../image/main_30.gif"  class="lazy"  alt="隐藏菜单"   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 src="/static/imghw/default1.png"  data-src="../image/main_30.gif"  class="lazy"  alt="隐藏菜单"   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>