用JS来控制 div的高度随浏览器变化而变化
<div id="test" style=" border: solid 1px #f00; "></div>
<script type="text/javascript">
<!--
//作者:凌陈亮www.lingchenliang.com(QQ:57404811)
autodivheight();
function autodivheight(){ //函数:获取尺寸
//获取浏览器窗口高度
var winHeight=0;
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)
winHeight = document.documentElement.clientHeight;
//DIV高度为浏览器窗口的高度
//document.getElementById("test").style.height= winHeight +"px";
//DIV高度为浏览器窗口高度的一半
document.getElementById("test").style.height= winHeight/2 +"px";
}
window.onresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度
//-->
</script>
用JS来控制 div的高度随浏览器变化而变化的更多相关文章
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- js键盘控制div移动,解决停顿问题
问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> &l ...
- yii2封装一个类控制div宽度,高度
1.首先,封装一个类,放在文件夹vendor下,命名为articls.php. <?phpclass Articles{ //测试 function add() { r ...
- js键盘控制DIV移动
<style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...
- Js控制Div在浏览器中的高度
//需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
随机推荐
- 【ZOJ】1015 Fishing Net
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1015 题意:给出一个n个点的无向图,询问是否为弦图,弦图定义为对于图中任意 ...
- spring源码学习之路---环境搭建(一)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近已经开始了spring源 ...
- Flex Vector使用(转)
从前(Flex SDK 4.0 以前版本)创建 Vector 实例一定要如下所示,这样的语法使我们在构造 Vector 对象时无法指定元素: var v:Vector.<T> = new ...
- hadoop CLASSNAME命令使用注意点
Hadoop中可是使用hadoop CLASSNAME命令.这个CLASSNAME就是你写好的类名.hadoop CLASSNAME命令类似于java classname. 使用hadoop CLAS ...
- 七、考反映小游戏《苹果iOS实例编程入门教程》
该app为应用的功能为一个简单的考反应游戏 纲要:-UIButton, UILabel, UIImageView 的运用:-利用rendom增加游戏可玩性: 游戏说明: 在按下开始游戏后,分为三盏的指 ...
- mysql相似于oracle的to_char() to_date()方法
mysql日期和字符相互转换方法, date_format(date,'%Y-%m-%d') -------------->oracle中的to_char(); str_to_date(dat ...
- mysql安装及卸载
一.关于mysql MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...
- Oracle 部分函数使用说明
oracle有些函数可能我知道是什么作用,但是具体其实说不清楚,这里是我这几天看到的函数使用方法及说明,记录一下,以后看看 --1.replace('str',oldVal,newVal)替换功能方法 ...
- js流程控制语句
do...while语句 do...while语句是一种先运行,后判断的循环语句.也就是说,不管条件是否满足,至少先运行一次循环体. var box = 1; ...
- $.ajax用法与举例
下面是一段比较常用到的 $.ajax 方法: $.ajax({ type:'GET', url:'http://www.phpernote.com/jquery.php', data:{usernam ...