• 自适应页面高度


          困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的LI或者别的),能够自动适应浏览器的变化。因为即使是同一分辨率,页面中的实际高度也不同。不过非常遗憾,网上的文章可谓无数,但基本都不能解决问题。基本上是这两类:
          1、页面中嵌了IFrame,希望Iframe不出现滚动条,大小刚刚和页面大小一样,这个基本方法,都是用页面的document.body.scrollHeight属性来完成的。其实我也是用Iframe,因为我的折叠菜单是用css+div实现的,没法用滚动条,所有我用一个Iframe来装它,当菜单过长时,由Iframe来显示滚动条。所以我需要的刚好相反:我要让Iframe的大小刚好等于浏览器页面的大小。
          理论上讲,document.body.clientHeight可以解决这个问题,但实际上不行。
          2、基本讲的都是用CSS来自适应页面高度,这里不是这个问题。
          最后,还是在cnblogs上找到了答案:
          http://dflying.cnblogs.com/archive/2006/03/27/360145.aspx
          不由得再次感叹:一千个copy的长篇大论,不如原创的一句话!
    我的代码:

    <SCRIPT LANGUAGE="JavaScript">
      function   window.onload()   
      
    {   
     document.getElementById(
    "I1").height=document.documentElement.clientHeight;  
     document.getElementById(
    "I1").width=document.documentElement.clientWidth;  
     
    //document.getElementById("I1").width=240;  //document.getElementById("I1").contentWindow.document.body.scrollHeight
     }

    </SCRIPT> 

          
    参考:控制IFrame大小,不显示滚动条的方法

    使用JS代码,方法有二:  
       
      1。  
       
      function   window.onload()  
      {  
      parent.document.all("I1").style.height=document.body.scrollHeight+15;  
      parent.document.all("I1").style.width=document.body.scrollWidth+10;  
      }  
       
      2。  
       
      function   window.onload()  
      {  
            window.resizeTo(document.body.scrollWidth+10,document.body.scrollHeight+10);  
      }  
      </script>  
       
      方法一的显示效果很好,但由于需要和主页面通信(parent……),对于一些将主页面和嵌入式页面放在不同主机的用户来说,就不能使用了,因为这是一个跨域访问  
       
      方法二是一种不错的办法,但由于不需要和主页面通信,当主页面显示速度很快时,嵌入式页面的JS代码可能不起作用。于是,我修改了方法二:  
       
      <script   language="Javascript">  
          var   times=0;  
          function   window.onload(){  
              resize=window.setInterval("resizenow();",1000);  
          }  
       
          function   resizenow(){  
              window.resizeTo(document.body.scrollWidth+10,document.body.scrollHeight+10);  
              if(++times>10){  
                  clearInterval(resize);  
              }  
          }  
      </script>    

  • 相关阅读:
    Microsoft.Office.Inter.Excel.dll在調用時可能會出現如下錯誤
    Proe 导出PDF Vb.net
    给Eclipse安装Google app engine插件
    VC++ 2013 开发windows窗体程序
    GitHub使用说明
    c# 发送邮件
    c# aes 加密解密
    sourceforge软件下载方式
    keyCode转换成值
    前端写代码自动刷新神器Browsersync
  • 原文地址:https://www.cnblogs.com/jetz/p/696975.html
Copyright © 2020-2023  润新知