Heim > Web-Frontend > HTML-Tutorial > iframe框架如何适应不同分辨率的浏览器_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:46:17
Original
1322 Leute haben es durchsucht

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>
Nach dem Login kopieren


回复讨论(解决方案)

宽度动态计算

你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>
Nach dem Login kopieren


<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>
Nach dem Login kopieren

问题解决了,代码贴出来,分享一下:
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>
Nach dem Login kopieren


<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>
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage