自适应页面高度

      困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的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>     

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

手机端网页使用html5地理定位获取位置失败的解决办法

网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端...

6466
来自专栏一“技”之长

iOS好用的第三方侧边栏控件——MMDrawerController

        很多应用程序都采用了侧边栏这样的界面结构,MMDrawerController是一个轻量级的侧边栏抽屉控件,其支持左侧抽屉和右侧抽屉,可以很好的...

902
来自专栏王大锤

iOS8 UICollectionView横向滑动demo

3696
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

2405
来自专栏iOS开发日记

iOS开发系列——纯代码实现iOS开发

storyboard进行界面设计固然不错,特别是对于初学者经常会使用设计器进行界面设计,但是实际开发过程中我们很多情况下会直接使用代码进行界面布局,特别是对于复...

4126
来自专栏Rindew的iOS技术分享

Swift 无限轮播YLCycleViewYLMenuViewYLSinglerowView

1999
来自专栏DannyHoo的专栏

UILabel加载html文本

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1882
来自专栏DeveWork

WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式二)

之前发表过一种样式的“返回顶部、返回底部、评论”效果,今天在这里分享Devework.com目前使用的效果:一个博客侧边滑动,返回顶部,查看评论的小工具,作为W...

2169
来自专栏Rindew的iOS技术分享

iOS 一个可滑动缩放的轮播图

2106
来自专栏前端说吧

JS - 原生js实现 网页截图(+下载截图) 功能

6244

扫码关注云+社区