自适应页面高度
困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的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>
- Angularjs基础(四)
- Google Fonts导致WordPress 速度问题的三个解决方案
- DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN
- Angularjs基础(三)
- 低多边形(Low-Poly)简介及相关素材分享下载
- 开发者的福音:GenerateWP 自动生成WordPress 开发相关代码
- 自定义WordPress 密码文章提示文字
- 解决WordPress文章密码保护在首页(摘要)不起作用
- WordPress 3.9+的 TinyMCE 4 编辑器增强开发
- Angularjs基础(二)
- Angularjs基础(一)
- iOS 7 Web App的初级优化之道
- Less 常用基础知识
- WooCommerce 结算页面自定义(删除/添加)表单元素
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java并发编程(4)- 线程安全策略
- Java并发编程(3)- 如何安全发布对象
- Python 技术篇-3行代码实现语音朗读,pywin32库实现语音朗读
- Java并发编程(2)- 线程安全性详解
- Python 技术篇-1行代码实现语音识别,speech库快速实现简单的语音对话
- linux和windows互传文件,用户配置文件和密码配置文件,用户组和用户管理
- 除Innodb和MyISAM外MySQL还有哪些存储引擎
- MySQL自身对性能的影响
- Python 技术篇-用pywin32库实现读写剪贴板
- Excel 技巧篇-在指定范围内生成指定小数位的随机数
- PyQt5 技巧篇-窗口置顶设置,如何使窗口始终显示在最前面
- 解决npm install时报错无法安装chromedriver的问题
- 解决集成jpa时无法创建entityManagerFactory的问题
- Spring船新版推出的WebFlux,是兄弟就来学我
- JDK9特性-Reactive Stream 响应式流