获取页面高度和滚屏部分高度兼容css2.0

最新推荐文章于 2024-08-27 10:49:57 发布
最新推荐文章于 2024-08-27 10:49:57 发布
阅读量445 收藏
点赞数
分类专栏： css 文章标签： css function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shayu99/article/details/1519199
版权
function bodyHeight(){ var cobj = document.body; while(cobj.scrollTop == 0 && cobj.parentNode) { if(cobj.tagName.toLowerCase() == 'html') break; cobj = cobj.parentNode; } return cobj.clientHeight; } function scrolltop(){ var cobj = document.body; while(cobj.scrollTop == 0 && cobj.parentNode) { if(cobj.tagName.toLowerCase() == 'html') break; cobj = cobj.parentNode; } return cobj.scrollTop; }
shayu99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取计算机显示屏高度,CSS 使用calc()获取当前可视屏幕高度
weixin_36026440的博客
07-26 2036
先了解一下CSS3的相对长度单位(参考详细教程) ：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；ex依赖于英文字母小 x 的高度ch数字 0 的宽度rem根元素(html)的 font-sizevwviewpoint width，视窗...
在牛客网答题总结的前端面试71道HTML+CSS常考题
bluedandelion的博客
05-30 3955
1、浏览器页面有哪三层构成，分别是什么，作用是什么?       构成：结构层、表示层、行为层        分别是：HTML、CSS、JavaScript        作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。2、HTML5的优点与缺点？优点：        a、网络标准统一、HTML5本身是由W3C推荐出来的；       b、多...
CSS使用calc()获取当前可视屏幕高度的实现
11-19
先了解一下CSS3的相对长度单位(参考详细教程) ： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 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中较小的那个。 vma
CSS 使用calc()获取当前可视屏幕高度
热门推荐
Soutv - Hello Bug !
05-03 7万+
先了解一下CSS3的相对长度单位(参考详细教程) ： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素（html）的...
CSS获取当前可视屏幕的高度
chenchuwai的博客
06-26 6172
vw （viewpoint width），视窗宽度，1vw=视窗宽度的1% vh （viewpoint height），视窗高度，1vh=视窗高度的1% calc() 函数用于动态计算长度值。支持 "+", "-", "*", "/" 运算，使用标准的数学运算优先级规则。 例子：height:calc(100vh-42px)； 注意：运算符前后都需要保留一个空格，100vh = 视窗高度的100% ...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
qq_39877681的博客
12-13 1万+
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
jquery(三)节点操作-滚动事件-ajax
sugar
07-27 294
jquery库三一、节点操作1. 节点操作的内容2. 使用验证实例3. 节点操作+事件委托-计划表二、滚动事件和函数节流1. 滚动事件2. 函数节流三、ajax1.json数据格式2. ajax的使用方法四、总结： 一、节点操作 1. 节点操作的内容 放到父级内容后面: 1. x.append(a): 在节点的尾部插入 将a放到x中去 父元素类后面放入子元素 2. a.appendTo(x): 将a放到x中 子元素放到父元素的后面 放到父级内容的前面 1. prepend() 2. pr
前端面试题
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
前端面试题总结
jing_jing95的博客
05-24 1123
1.GET 和 POST 到底有什么区别？ - 大宽宽的回答 - 知乎 1.1 场景一：浏览器使用的GET/POST 浏览器中非AJAX的HTTP请求，HTTP协议中的GET/POST 浏览器用GET请求来获取一个html页面/图片/css/js等资源；用POST来提交一个<form>表单，并得到一个结果的网页 1.1.1 GET “读取“一个资源，反复读取不应该对访问的数据有副作用 [没有副作用被称为“幂等“（Idempotent)] 可以对GET请求的数据做缓存： 缓存可以做到
牛客网-精华专题-前端校招面试题目合集
qq_41254204的博客
02-01 2912
前端校招面试题目合集 501HTML HTML 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层(structural layer)、表示层(presentation layer)、行为层 (behavior layer) 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务 H...
根据浏览器屏幕大小高度自适应
12-10
根据浏览器屏幕大小高度自适应
html 获取页面高度css,css怎么获得屏幕的高度？
weixin_30764045的博客
06-03 1696
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。通过vh / vw 我们可以获得当前屏幕的视窗宽度，所以在css中，通过计算这个高度即可使得div的高度自动撑开到屏幕高度。而计算这个高度可以使用css3的calc()函数：calc() 函数用于动态计算长度值。需要注意的是，运算符前后都...
css实现自适应屏幕高度
u013571243的专栏
04-08 1935
body,html{ margin:0px; height:100%; width:100%; } .auto{ width:100%; height:100%; background:red; }
不使用 JS 纯 CSS 获取屏幕宽高
最新发布
南城
08-27 845
CSS 自定义属性（也称为 CSS 变量）允许开发者在 CSS 中定义可重用的值。通过使用 var() 函数，可以在样式表的任何地方引用这些变量。自定义属性的定义通常在:root选择器中进行，以便在整个文档中使用。通过使用 CSS 的@property规则和数学函数，我们可以在不使用 JavaScript 的情况下获取屏幕的宽度和高度。随着 CSS 规范的不断发展，未来可能会有更多类似的功能，使得前端开发更加灵活和高效。
判断窗口高度
thingir的博客
01-20 590
// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight
获取浏览器窗口可视区域的高度和宽度
博客of me
08-22 1769
这是浏览器窗口的内部高度，即可视区域的高度，不包括浏览器的工具栏、标签栏等非内容区域的部分。这是最常用的获取窗口可视区域高度的方法。这通常与窗口可视区域的高度相同，但是在一些情况下，可能会受到CSS样式的影响。然而，这种方法在某些浏览器和情况下可能会失效，因为。不可用，这个属性会尝试获取文档的根元素（通常是。: 如果前两种方法都不可用，这个属性会尝试获取。元素可能没有占满整个可视区域。另外，还可以计算对角线长度。解释：（以高度为例）
web移动端全屏滚动页面的适配问题
weixin_30535913的博客
10-29 294
1.问题说明     近日接到页面全屏滚动的需求，内容为：一张图片，一段文字以及固定在屏幕下方的按钮，如图所示： 根据设计稿尺寸写好页面布局，在大多数手机尺寸中都是适配的，个别手机及ipad会出现问题，以下特例说明：     <1> iphone X（375812）中，fixed定位的按钮即红色区域会与上方内容之间存在一段较长的空白，影响美观。     <2> ipad(7...
获取浏览器宽高的兼容性写法
qq_41343672的博客
04-01 410
获取浏览器宽高的兼容性写法 //可视窗口宽高 var w = document.documentElement.clientWidth||document.body.clientWidth var h =document.documentElement.clientHeight||document.body.clientHeight //窗口距离页面顶端左端距离（可视区域距离滚动出可视区域距离...
CSS-滚动条样式设置
LzzMandy的博客
06-12 2232
注意：滚动条设置的width、height，分别是对应纵向滚动条 宽度、横向滚动条 高度，无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式，常用属性如下： ::-webkit-scrollbar 滚动条整体样式 ::-webkit-scrollbar-button 一设置滚动条样式，滚动条两...
使用html和css实现文字滚屏
03-26
以下是一个简单的实现文字滚屏的 HTML 和 CSS 代码： ```html <!DOCTYPE html> 文字滚屏 <style type="text/css"> body { margin: 0; padding: 0; overflow: hidden; } .container { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值