Home >Web Front-end >HTML Tutorial >How does the iframe framework adapt to browsers with different resolutions_html/css_WEB-ITnose
The background management of asp.net is made of iframes, but the display between widescreen and narrowscreen is not particularly good, there is a big gap.
This is displayed normally in narrow screen, but there is an icon on the right in widescreen. Blank, looks very inconsistent
The following is the html code:
<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%" height="100%" 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>
Dynamic calculation of width
Give the menu navigation a max-width in your class, and don’t let it exceed it; Logically speaking, if you give a fixed value to the navigation menu, it will generally not be blank. It may be your other styles. question .
I found out that the width of the ifram on the right side cannot be dynamically adjusted. I found some codes online, but it didn’t work.
<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>
The problem is solved, the code is posted, please share:
The html code is as follows, please note that the width and height should be set to 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="width:auto;height:auto;"><iframe width="100%" height="100%" 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>