用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个超链接,需要点击一个链 ...
随机推荐
- gcc 版本降级
由于刚刚装了ubuntu 16.04,该版本gcc版本为5.4.0太高,很多软件不支持,所以要降版本,可以直接看(三)解决 一.gcc源代码网站 ftp://mirrors.kernel.org/gn ...
- 从一个QQ群友那儿偷来的js图形 ^_^
<script type="text/javascript"> var head=document.createElement("HEAD"); d ...
- C#实现动态页面静态化
制作一个aspx页面,专门用来生成各个动态aspx页面的静态页面.如下图所示,仅将内容页和主页面生成静态页面,当然本例只是一个简单的范例,实际情况如很复杂,但原理都是相同的. 生成内容页: 本例中的不 ...
- 利用jdk自带的运行监控工具JConsole观察分析Java程序的运行
利用jdk自带的运行监控工具JConsole观察分析Java程序的运行 原文链接 一.JConsole是什么 从Java 5开始 引入了 JConsole.JConsole 是一个内置 Java 性能 ...
- Objective-C的新特性
Objective-C的新特性 苹果在今年的 WWDC2012 大会上介绍了大量 Objective-C 的新特性,能够帮助 iOS 程序员更加高效地编写代码.在不久前更新的 Xcode4.4 版本中 ...
- butterknife简介及Generate ButterKnife Injections 不出现的问题解决
一.概述 butterknife是一款as的功能强大插件.有了它,你几乎可以和findViewById说byebye了. 二.使用 github地址:https://github.com/avast/ ...
- HTML第二节课
表单 <form id="" name="" method="post/get" action=""> &l ...
- php循环删除文件目录及文件
删除文件及目录: //循环删除目录和文件函数 function delDirAndFile( $dirName ) { if ( $handle = opendir( "$dirName&q ...
- 2016HUAS暑假集训训练2 J - 今年暑假不AC
题目链接:http://acm.hust.edu.cn/vjudge/contest/121192#problem/J 此题要求是计算能够看到最多的节目 ,贪心算法即可,首先对结束时间排序,然后在把开 ...
- mysql时间格式化,按时间段查询MYSQL语句
描述:有一个会员表,有个birthday字段,值为'YYYY-MM-DD'格式,现在要查询一个时间段内过生日的会员,比如'06-03'到'07-08'这个时间段内所有过生日的会员. SQL语句: Se ...