用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个超链接,需要点击一个链 ...
随机推荐
- App所需申请资料
准备资料 企业五证 营业执照 税务登记证 组织机构代码证 银行开户许可证 法人身份证 新邮箱 申请一个新的邮箱地址,供申请以下材料使用 苹果证书申请 AppleID 申请邓氏编码需要有AppleID ...
- C#后台如何获取客户端访问系统型号
ASP.NET获取客户端.服务器端基础信息 . 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息:Page.User 获取客户端电脑名:P ...
- OSG-OSGEarth
OSG-OSGEarth 初次使用Cmake——以OsgEarth工程创建为例 转:http://www.cnblogs.com/Realh/archive/2012/02/08/2342507.ht ...
- js打印功能
1.window.print方式: jsp页面 打印按钮: <input type="button" value="打印" onclick=& ...
- 3ds Max Shortcuts 快捷键大全
主界面 [Q]选择循环改变方式 [W]移动 [E]旋转 [R]缩放循环改变方式 [7]物体面数 [8]Environment [9]Advanced lighting [0]Render to Tex ...
- [LintCode] Restore IP Address 复原IP地址
Given a string containing only digits, restore it by returning all possible valid IP address combina ...
- gitlab的使用方法
Git global setup: git全局建立 git config --global user.name "Your Name" git config --global us ...
- jquery_插件
编写插件的目的:给已有的一些列方法或函数做一个封装 jquery插件推荐命名方式 :jquery.[插件名].js 防止与插件库混淆 所有对象方法都应当附加到jquery.fn 对象上,所有的全局函 ...
- Struts基础详解
1.web.xml配置: <filter> <filter-name>Struts2</filter-name> <filter-class> org. ...
- easyui datagrid 单选框 效果
columns: [[{ field: 'oid', title: '选择', width: 20, forma ...