JS获取网页高度及屏幕分辨率高度让DIV层始终在页面最底部

最新推荐文章于 2023-08-05 10:16:14 发布
转载 最新推荐文章于 2023-08-05 10:16:14 发布 · 5k 阅读 · 0
标签
#div #table #html #javascript
本文介绍了一种使用JavaScript实现DIV元素始终保持在浏览器窗口底部的方法。无论页面是否出现滚动条，通过调整TABLE高度可以看到DIV始终处于最底部。代码中包含了一个简单的HTML页面示例，演示了如何利用JavaScript获取网页高度并据此定位DIV。

用法：将以下代码保存为HTML格式的页面即可。

实现的功能：

当页面里内容的高度没有让页面出现滚动条时，页面当前页面的最底部显示。

当出现滚动条后，DIV层会自动向下跟随，在页面的最底部显示。

更改TABLE的高度就可以看到DIV层始终在页面最底部



<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > JS获取网页高度及屏幕分辨率高度让DIV层始终在页面最底部 </ title >
</ head >

< body  leftmargin ="0"  topmargin ="0" >

< table  width ="100%"  height ="405"  bgcolor ="#eeeeee" >
     < tr >
         < td >
        aaa
         </ td >
     </ tr >
</ table >
< div  id ="t1"   style ="position:absolute;border:double;" >
aaaaaaa
 </ div >
< script  language ="javascript" >
//document.all.t1.style.top = document.body.clientHeight;
    var h1 = window.screen.availHeight-165;
    if (document.body.clientHeight<h1)
      document.all.t1.style.top = window.screen.availHeight-165;
    document.write ("当前窗口宽："+document.body.offsetWidth+"；　高："+document.body.clientHeight+"aaaa"+(window.screen.availHeight));

 
 </ script >
</ body >
</ html >
 
js&jq：获取div的宽度、高度、屏幕距离方法总结
kxy5201314的博客
10-21 1万+
jq获取div的宽度 var content = $(‘div’). width(); //只是获取content宽度 var contentWithPadding = $(‘div’). innerWidth(); //获取content+padding的宽度 var withoutMargin = $(‘div’). outerWidth(); //获取content+padding+border的宽度 var full = $(‘div’). outerWidth(true)
js 判断div距离浏览器顶部或者底部的距离
学习博客 记录技术文档及心得体会
08-05 1872
【代码】js 判断div距离浏览器顶部或者底部的距离。
js实现div固定在下方
yzxzsp11的博客
01-29 1083
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsBOM</title> <style> #div1{ width: 100px; height: 200px; background-color:
【js】当页面不断加载变长时如何保证页面滚动条始终置于底部
Pragmatism_3568的博客
09-29 941
非div
js获取屏幕高度
不忘编码
05-07 6140
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 vue使用 document.documentElement.clientHeight/window.innerHeight ...
html页面上获取屏幕分辨率,JS获取当前网页大小以及屏幕分辨率等
weixin_39842955的博客
06-03 2041
获取当前对象大小以及屏幕分辨率等var s = "";s += " 网页可见区域宽："+ document.body.clientWidth+"";s += " 网页可见区域高："+ document.body.clientHeight+"";s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"";s += " 网页可见区域...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度
qq_15626693的博客
01-19 5790
一、先来大致了解下基本的信息 上图时一张我从别人的博客中找到的，比较系统形象的展示了一些基本的信息。 二、显示器的屏幕信息 screeen.height:屏幕分辨率的高 screen.width:屏幕分辨率的宽 前面这两个数表示：屏幕宽高(屏幕像素) ---- 定值 screen.availHeight:屏幕可用高度（屏幕分辨率的高度-上下测任务栏的高度） screen.
js获取页面卷曲高度兼容写法
weixin_43617604的博客
07-01 2334
js获取页面卷曲高度兼容写法 window.onscroll = function (e) { var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; console.log(scrolltop);...
JS获取当前网页大小以及屏幕分辨率等
weixin_30298497的博客
06-05 328
<html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <div style=" width:88%;margin:30px auto; color:blue;"id="div_html"> </div> <script type="t...
获取当前div中的所有div的个数和每一个div的ID and 根据屏幕分辨率计算高度
diaobianpan6784的博客
10-18 259
var tabs_Count=document.getElementById("tabs-panels").getElementsByTagName("div").length; var genTab_PanelID=null; for(var i=0;i<tabs_Count;i++) { ...
获取元素、浏览器、屏幕分辨率宽度，高度，坐标的方法及其区别
热门推荐
吴小迪的博客
05-12 3万+
首先我们弄出来俩个div，分别加上样式： <DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding...
Js获取标签高度
diaopubin4661的博客
12-28 577
能力有限：问个问题，标签相对页面高度，是怎么写？ 鼠标的横坐标，X轴:　　event.clientX; 鼠标的竖坐标，Y轴:　　event.clientY; 网页可见区域宽:　　 document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域高(包括边线的宽)：docu...
获取屏幕的高度赋值给容器div
Chainse的专栏
06-17 957
//获取屏幕的高度，赋值给div的id="LeftBox" var winHeight = 0; function findHeight(){ if (window.innerHeight)winHeight = window.innerHeight;//获取窗口高度 else if ((document.body) && (document.body.clientHe...
Js/Jquery获取网页屏幕可见区域高度
滴水石穿
07-11 775
Js/Jquery获取网页屏幕可见区域高度 获取浏览器窗口的可视区域高度和宽度,滚动条高度 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度
如何让div覆盖整个页面？
xiaofengxiaoling的专栏
08-23 8660
得到div高宽 var hA =document.getElementById("div1"); hA.style.width = window.screen.availWidth-20; //得到宽度 var s_height=document.body.scrollHeight; if(s_height<window.screen.availHeight) { s_height=wi
原生JS获取高度方法，去除padding、border、margin
hapyss的博客
10-18 9537
一、常规知识： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWi...
获取当前可视屏幕高度
liuzaixi的博客
08-07 5286
em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素（html）的 font-size vw viewpoint width，视窗宽度，1vw=视窗宽度的1% vh viewpoint height，视窗高度，1vh=视窗高度的1% vmin vw和vh中较小的那个。 vmax v
html 自动获取屏幕分辨率,JS获取当前网页大小以及屏幕分辨率等
weixin_33364134的博客
05-31 854
获取当前对象大小以及屏幕分辨率等var s = "";s += " 网页可见区域宽："+ document.body.clientWidth+"";s += " 网页可见区域高："+ document.body.clientHeight+"";s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"";s += " 网页可见区域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值