获取窗口浏览器的高度。并把页面的高度设成此高度

最新推荐文章于 2024-05-22 15:05:40 发布
最新推荐文章于 2024-05-22 15:05:40 发布
阅读量610 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端小知识 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/83537498
本文介绍了一种使用JavaScript动态获取屏幕高度并调整div元素高度的方法，同时确保了页面内容超过显示区域时能自动出现滚动条。此技巧对于响应式网页设计特别有用，能够使页面布局在不同设备上保持一致。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

this.clientheight=document.documentElement.clientHeight-230;//获取屏幕的高度。-230是因为页面的内容可能有其他的部分，当前部分的高度要减去那个部分

<div v-loading="listLoadingRole" style="overflow-y:scroll;" :style="{height:clientheight+'px'}">

             ·····需要加滚动条的部分

</div>

获取浏览器窗口高度(动态计算)
jieweiwujie的博客
01-31 431
【代码】获取浏览器窗口高度(动态计算)
获取屏幕高度——浏览器高度、控制台高度、工具栏高度
ilovewangjie990502的博客
07-01 2852
今天想写一个效果，进入网站顶部导航栏需要一个全屏背景图，这个需要根据不同的屏幕大小适应不同的高度（不能使用height为100%，这个涉及到最外层容器的高度，容易造成高度塌陷），所以需要一个确定高度值。 一开始最快反应就是document.body.clientHeight 确实拿到了屏幕高度，可是出现了一个问题，就是你一旦打开控制台以后再刷新页面，当前获取的clientHeight高度就变成了剪掉控制台的高度了。 就像下面这样： 当你打开控制台后： 关闭控制台后： 这就是问题所在，于是我找了资料，就
js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变
03-11
js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变
mui获取html页面高度,MUI：实现页面间传值
weixin_39850152的博客
06-07 407
# 方法1 ： 通过MUI封装的openWindow 方法:mui.openWindow({url:new-page-url,id:new-page-id,styles:{top:newpage-top-position,//新页面顶部位置bottom:newage-bottom-position,//新页面底部位置width:newpage-width,//新页面宽度，默认为100%height...
获取页面高度
tx_xiaobai的博客
07-06 341
var screenHeight = document.documentElement.clientHeight-310; $('.loginBox').css('height',screenHeight);
vue前端动态获取页面高度宽度
最新发布
SDKL_YI的博客
05-22 556
【代码】vue前端动态获取页面高度宽度。
mui获取屏幕宽度与高度
weixin_45932157的博客
06-25 1226
宽度： document.documentElement.clientWidth; 高度： document.documentElement.clientHeight; 实例： var height=document.documentElement.clientHeight; $("body").height(height); 效果展示：
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
10-21
在本文中，我们将深入探讨如何使用JavaScript获取浏览器高度、窗口高度、元素尺寸以及元素的偏移属性。这些都是前端开发中常见的需求，理解并掌握这些方法对于优化用户体验至关重要。 首先，我们来看如何获取浏览器...
js 获取浏览器高度和宽度值(多浏览器)
10-29
浏览器高度和宽度值获取方法汇总 在 Web 开发中，获取浏览器的高度和宽度值是非常重要的，因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而，浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...
JQuery获取浏览器窗口内容部分高度的代码
10-28
在实际项目中，获取窗口的高度与宽度往往是为了使我们的网页或页面上的某个部分能够适应不同设备的屏幕尺寸。为了达到这一目的，我们除了可以使用JQuery提供的方法外，还可以利用CSS媒体查询来对不同尺寸的视口定义...
常用高度——获取浏览器窗口的高度（jquery和js）
weixin_33872660的博客
07-30 226
一：针对浏览器的常用高度 jquery的用法： <script type="text/javascript"> $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 （这儿也是...
小屏layui 弹窗自适应高度
qq_31120499的博客
01-13 875
设定具体像素值高度，在大屏显示没问题，在更小屏显示却撑破浏览器，导致关闭不了，部分信息查看不了。可参考的解决方法：获取浏览器时下窗口可视区域高度 ，对比设定的高度像素值，取最小的那一个。 //打开弹窗 height:具体设定的高度像素值 function openWin(title, width, height, content, callback) { var winH = $(window).height();//浏览器时下窗口可视区域高度 if(winH < height){
Extjs panel自动适应页面高度
tgb102的博客
04-14 2167
listeners :{ //进入页面执行事件设置高度和宽度 'render':function(){ this.setWidth(document.body.offsetWidth); this.setHeight(document.body.offsetHeight); },bodyresize:function() {this.setWidth(wind...
获取可视窗口、浏览器器窗口、屏幕分辨率、工具栏高度的宽高？
qq_44472790的博客
05-28 898
screeen.height:屏幕分辨率的高 screen.width:屏幕分辨率的宽 screen.availHeight:屏幕可用高度（屏幕分辨率的高度-上下测任务栏的高度） screen.availWidth:屏幕可用宽度（屏幕分辨率的宽度-左右侧任务栏的宽度） window.outerHeight:浏览器高度 window.innerHeight:浏览器可用高度 工具栏高度=window....
重新设置iframe页面的高度
weixin_44484621的博客
06-09 5181
开发工具与关键技术：VS、JS 作者：盘耀海 撰写时间：撰写时间：2019年06月06日 iframe页面高度超出window窗口高度出现滚动条： 重新设置高度iframe的高度把多出的的高度调整使滚动条不出现 重新设置当前window的高度 = 设置的高度 获取iframe页面的id，设置window的高度减去超出的高度加上单位px 使用js代码而不用jQuer...
html设置页面的宽度和高度,css怎么定义div的宽度和高度？
weixin_31518073的博客
06-05 8684
在css中，使用width和height属性便可以定义div的度度和高度。下面本篇文章就来给大家通过示例来具体介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。width 属性设置元素的宽度，height 属性设置元素的高度。这两个属性定义元素内容区的宽度和高度，在内容区外面可以增加内边距、边框和外边距；行内非替换元素会忽略这两个属性。示例：使用div标签创建一个模块，下面...
CSS专题（三）：页面高度发微
dazhatan9812的博客
08-14 287
一 背景 　　本文不讨论普通元素的大小和位置，仅仅讨论页面的大小和位置，而且为了简化问题，本文只讨论高度与顶部距离。笔者发现，页面的宽度与高度的表现有很多不同，细心的朋友会发现，故页面宽度另起文讨论，文章已经写好，见页面宽度发微。 　　这里说的页面高度，是指浏览器页面的高度。有以下四种元素能够表现页面的高度：window,html,document,body。这些元素的高宽常常不被人...
vue中怎么获得浏览器窗口的高度
m0_68094390的博客
05-20 3711
在mounted钩子函数中添加resize事件监听器，并在事件回调函数中调用getWindowHeight方法来获取窗口高度并赋值给组件的windowHeight属性，在模板中展示窗口高度。在beforeDestroy钩子函数中移除resize事件监听器，以防止组件销毁时内存泄漏。可以使用JavaScript中的window对象来获取浏览器窗口的高度，然后在Vue中使用。
vue.js获取屏幕高度clientHeight设置充满屏幕引导页
热门推荐
jerrica的博客
06-12 5万+
实现效果：方法：html:JS：&lt;script&gt; export default { data(){ return { clientHeight:'', } }, mounted(){ // 获取浏览器可视区域高度 this.clientHeight = `${document.documen...
获取浏览器页面视口高度
06-10
获取浏览器页面视口高度可以使用 `document.documentElement.clientHeight` 或 `document.body.clientHeight` 属性。其中，`document.documentElement.clientHeight` 返回当前文档根节点的视口高度，`document.body....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值