Js控制Div在浏览器中的高度

//需求是，我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数：获取尺寸    //获取浏览器窗口高度    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高度为浏览器窗口高度除以1.7    document.getElementById("Odiv").style.height= winHeight/1.7 +"px";    var Oul = document.getElementById("Chat-ul").style.height=Math.ceil(winHeight*1);    var Odiv = document.getElementById("chatlist").style.height=Math.ceil(winHeight/1.4);    if(Oul>Odiv){　　//当ul里内容的高大于div的高才显示div的高，小于则不显示        document.getElementById("chatlist").style.height=Math.ceil(winHeight/1.4)+"px";    }

}    window.onresize=boxheight; //窗口或框架被调整大小时执行

时间： 2024-12-24 11:50:47

Js控制Div在浏览器中的高度的相关文章

js控制div是否显示

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,ul,li{ padding:0; margin:0} li { list-style:none; } .lis { wi

在微信浏览器中,分享弹窗高度适配,原理就是使弹窗高度由内容撑开,主要应用于分享内容为一张很长的图片时,当图片过长,在小屏手机上显示不完全时,等比缩小一定尺寸使其能完全显示,大屏手机则按照原图尺寸显示. 效果图如下: 实现过程如下: 1. html结构 <section v-show="isShare" class="canvas_share"> <div class="share_wrap"> <div id=&qu

CSS - Select 标签在不同浏览器中的高度设置

当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html-element-with-height Demo:http://jsfiddle.net/64px3yg5/1/ HTML: <select> <option>Here's one option</option> <option>here's another o

用两种方法来实现一个背景色为红色，宽度为800px，高度为400px的<DIV>在浏览器中居中

第一种方法 <style> div{ margin: 0 auto; background-color: yellow; width: 50em; height: 25em; text-align: center; } </style></head><body><div> div居中</div></body> 第二种方法 <style> div{ position: absolute; left: 50%; m

如何获取div距离浏览器顶部的高度，宽度，内容

JS就可以获取了, document.getElementById("DIV的ID或者其它选择").offsetTop;这是离顶部 JQ可以这样: $("#aaa").offset().top; //jq获取aaa元素距离body的距离 document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid(

js 在一个DIV前、中、后、插入新DIV

之前做了一个项目,不能用jquery写代码,只能用原生的js写插入,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <

JS获取屏幕，浏览器，网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

flex与js通信、在浏览器中打开新窗口

一.flex与js通信(通过flex调用js方法) var urlR:URLRequest = new URLRequest("javascript:test('from flex')"); navigateToURL(urlR, "_self"); 其中URLRequest中的js方法必须用引号test是js方法名,'from flex'是该js方法的参数. 另一种相互通信方法: ExternalInterface.addCallback("getKyq

js控制div内的滚动条的位置

通过div的scrollTop变动控制垂直滚动条位置. 通过div的scrollLeft变动控制水平滚动条位置. 示例: <body> //d1是外层div,带滚动条 <div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'> <div style='height:500px;width:500px;background:yellow'>2222</div> &l