<%@ Page Language="C#" AutoEventWireup="true" CodeFile="center.aspx.cs" Inherits="DHM_center" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>多画面显示</title>
    <style type="text/css">
        .top
        {
            background-color: #FFFFFF;
            width: 100%;
            height: 100%;
        }
        .top .a1
        {
            float: left;
            width: 100%;
            height: 100%;
            background-color: White;
        }
        .top .a1 .b1
        {
            background-color: white;
            float: left;
            width: 50%;
            height: 100%;
        }
        .top .a1 .b2
        {
            background-color: white;
            float: left;
            width: 50%;
            height: 100%;
        }
        .top .a1 .b3
        {
            background-color: white;
            float: left;
            width: 50%;
            height: 100%;
        }
        .top .a1 .b4
        {
            background-color: white;
            float: left;
            width: 50%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        //iframe高度自适应
        function IFrameReSize(iframename) {
            var pTar = document.getElementById(iframename);
            if (pTar) {  //ff
                if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
                    pTar.height = pTar.contentDocument.body.offsetHeight;
                } //ie
                else if (pTar.Document && pTar.Document.body.scrollHeight) {
                    pTar.height = pTar.Document.body.scrollHeight;
                }
            }
        }
        //iframe宽度自适应
        function IFrameReSizeWidth(iframename) {
            var pTar = document.getElementById(iframename);
            if (pTar) {  //ff
                if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {
                    pTar.width = pTar.contentDocument.body.offsetWidth;
                }  //ie
                else if (pTar.Document && pTar.Document.body.scrollWidth) {
                    pTar.width = pTar.Document.body.scrollWidth;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="top">
        <div class="a1">
            <div class="b1">
                <iframe id="if_left_top" scrolling="no" frameborder="0" height="100%" src='<%=url1%>' width="100%" onload='IFrameReSize("if_left_top");IFrameReSizeWidth("if_left_top");' ></iframe>
            </div>
            <div class="b2">
                <iframe id="if_right_top" scrolling="no" frameborder="0" height="100%" src="<%=url2%>" width="100%" onload='IFrameReSize("if_right_top");IFrameReSizeWidth("if_right_top");' ></iframe>
            </div>
            <div class="b3">
                <iframe id="if_left_bottom" scrolling="no" frameborder="0" height="100%" src="<%=url3%>" width="100%" onload='IFrameReSize("if_left_bottom");IFrameReSizeWidth("if_left_bottom");' ></iframe>
            </div>
            <div class="b4">
                <iframe id="if_right_bottom" scrolling="no" frameborder="0" height="100%" src="<%=url4%>" width="100%" onload='IFrameReSize("if_right_bottom");IFrameReSizeWidth("if_right_bottom");'></iframe>
            </div>
        </div>
    </div>
    </form>
</body>
</html>以上在一个页面中使用了四个iframe,可是效果是这样的,高度只有一半,不是很了解。也尝试使用过table布局,两行两列,但都没实现高度100%的效果。

解决方案 »

  1.   

    在IE6 IE7 IE8上效果一样吗?
      

  2.   

    在IE8上是不行的,就这个效果,其他没试过,因为IE8不行,所以即使IE6或IE7行的话,也不能解决这个布局问题。
      

  3.   

    你要设置高度,首先要保证容器的高度是固定的,如
    html,body,form{height:100%}另外,既然是自适应高度,外面设置的css就没有作用了啊
      

  4.   

    100%高度的代码另外,你需要搞清楚,100%是相对于谁的100%
    <%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>多画面显示</title>
      <style type="text/css">
        html, body, form
        {
          height: 100%;
        }
        .top
        {
          background-color: #FFFFFF;
          width: 100%;
          height: 100%;
        }
        .top .a1
        {
          float: left;
          width: 100%;
          height: 100%;
          background-color: White;
        }
        .top .a1 .b1
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
        .top .a1 .b2
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
        .top .a1 .b3
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
        .top .a1 .b4
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <div class="top">
        <div class="a1">
          <div class="b1">
            <iframe id="if_left_top" scrolling="no" frameborder="0" height="100%" src='Default10.aspx'
              width="100%"></iframe>
          </div>
          <div class="b2">
            <iframe id="if_right_top" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
              width="100%"></iframe>
          </div>
          <div class="b3">
            <iframe id="if_left_bottom" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
              width="100%"></iframe>
          </div>
          <div class="b4">
            <iframe id="if_right_bottom" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
              width="100%"></iframe>
          </div>
        </div>
      </div>
      </form>
    </body>
    </html>
      

  5.   

    正常现象。你用的是百度做例子,所以得到的高度不正确。绝大部分网页用用xhtml了,就是页头有
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">所以百度、asp.net错误页面,iframe取得的高度都是不正确的。 
      

  6.   

    这样是做是可以,但是自适应宽度和高度就无法保障了。
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="DHM_test" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>多画面显示</title>
      <style type="text/css">
        html, body, form
        {
          height: 100%;
        }
        .top
        {
          background-color: #FFFFFF;
          width: 100%;
          height: 100%;
        }
        .top .a1
        {
          float: left;
          width: 100%;
          height: 50%;
          background-color: White;
        }
        .top .a1 .b1
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
        .top .a1 .b2
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
        .top .a1 .b3
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
        .top .a1 .b4
        {
          background-color: white;
          float: left;
          width: 50%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <div class="top">
        <div class="a1">
          <div class="b1">
            <iframe id="if_left_top" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
              width="100%"></iframe>
          </div>
          <div class="b2">
            <iframe id="if_right_top" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
              width="100%"></iframe>
          </div>
          <div class="b3">
            <iframe id="if_left_bottom" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
              width="100%"></iframe>
          </div>
          <div class="b4">
            <iframe id="if_right_bottom" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
              width="100%"></iframe>
          </div>
        </div>
      </div>
      </form>
    </body>
    </html>
      

  7.   

    自适应高度是可以的,那你写css还有什么用啊。js 代码都重新设置了,设置完后是iframe里面内容的高度,不是外面css的了。所以,100%就无效了啊
      

  8.   

    主要是想通过左侧的树形菜单,通过点击一次在右边显示一个视频监控画面,一共是四个画面,点击第五次的时候,第一个画面的src重新换成第五次点击的页面??我暂时想通过iframe来实现,有没有后其他更好的办法?
      

  9.   

    我当时这是用百度页面作为src来测试用的而已
      

  10.   

    如果你想4个画面绝对地上下左右各2个。那么table就可以了
    <table style="width:100%">
    <tr>
    <td style="width:50%"><ifram style="width:100%" onload='IFrameReSize("if_left_top");' id="if_left_top"></iframe></td><td style="width:50%"></td>
    </tr>
    <tr>
    <td style="width:50%"></td><td style="width:50%"></td>
    </tr>
    </table>
    div float的做法如果内容不是一个高度,可能会错位的。另外,没有设置width设置高度是采用css,必须加px  <script type="text/javascript">
        //iframe高度自适应
        function IFrameReSize(iframename) {
          var pTar = document.getElementById(iframename);
          if (pTar) {  //ff
            if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
              pTar.style.height = pTar.contentDocument.body.offsetHeight + "px";
            } //ie
            else if (pTar.Document && pTar.Document.body.scrollHeight) {
              pTar.style.height = pTar.Document.body.scrollHeight + "px";
            }
          }
        }   
      </script>