首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js获取各种高度总结

    在写js的时候偶尔需要获取各种高度,比如;浏览器高度,页面高度,滚动高度等。抽空整理了我自己常用到的,时间仓促,没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度(屏幕分辨率): window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度: document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...: document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度(不加边线): document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度(加边线): document.body.offsetHeight document.body.offsetWidth

    12.6K20

    iframe自适应高度_html页面自适应

    为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉。...在页面中通过iframe嵌入了另外一个页面后,如何使得页面的这块区域随着iframe的高度自动适应而不会出现蹩脚的上下左右滚动条呢?...下面这个办法就是使用javascript实现iframe高度自适应的,这个可是兼容所有浏览器的,ie,firefox,chrome,opera,safari这些浏览器都能够实现iframe高度自适应的,...具体的js代码如下:function dyniframesize(down){ var Sys={}; var ua=navigator.userAgent.toLowerCase(); var s...phpernote” οnlοad=”javascript:dyniframesize(‘phpernote’);”> 上篇文章我们介绍了如何使用iframe属性,这篇文章也依然教大家iframe自适应高度的解决办法

    3.8K20

    css 实现刘海屏样式兼容并支持 js 获取刘海屏高度后动态修改

    safe-area-inset-constant-left: constant(safe-area-inset-left); } } 首先设置 css 根属性变量值,如果是 less,通过 calc 计算出增加刘海屏高度后的值...函数,会导致获取的结果为 0 从而导致 calc 计算结果也为 0 ,所以要在初始化写为 0px,则通过 css  @supports 来判断支持 constant 和 env 函数的情况下再赋值刘海屏高度值...js 通过与iOS 和安卓的接口获取到客户端返回的实际刘海屏的高度,当返回的高度存在时,则重新赋值 root 跟元素的变量,否则用浏览器默认的。...这样实现的目的是为了解决部分机型下,env 函数和 constant 函数都获取失败导致无法处理刘海屏高度的场景。...js vue3 代码 import { readonly, reactive, watch, ref } from 'vue' import { setRootProperty } from '@/common

    11510

    【解决方案】UI高度自适应的修改

    根据设计图 content 区域分成三个容器,A B C 现在是要求 content 区域实现高度响应式,同时 A + B 的高度 和 C 的高度一致。...A 的高度可以调整,B 的高度自适应。...最终效果如下 副作用 由于修改了代码结构,导致部分容器内元素的 CSS 失效,暂时没有查明原因,以及无法预估后续修改的工作量,单就调整 css 来看应该难度不大,但是细节比较多。...codePage 蓝湖UI设计图 设计图展示划分如下 Header 通用 Sider 通用 Content 自定义 Content区域规划 由于面包屑展示形式不一致,计划放在页面单独管理,所以把面包屑放在...(height:100%) 按照设定好的 html 结构对代码进行重构 最终效果如下 动态展示 备注 类名为演示用,应适当修改更具语义化 由于修改了 dom 结构,需要把背景颜色设置在对应的 div

    72530
    领券