Home >Web Front-end >HTML Tutorial >How does the iframe framework adapt to browsers with different resolutions_html/css_WEB-ITnose

How does the iframe framework adapt to browsers with different resolutions_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:46:171328browse

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>


Reply to discussion (solution)

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>

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