关于vue中height属性需要根据屏幕高度动态调整但是设为百分比不生效的解决办法

最新推荐文章于 2024-04-19 10:53:35 发布
最新推荐文章于 2024-04-19 10:53:35 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： vue+element 文章标签： css vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24503157/article/details/115765039
版权

关于vue中height属性需要根据屏幕高度动态调整但是设为百分比不生效的解决办法

在Vue中项目中遇到height属性设为百分比但是不生效，却需要根据屏幕高度动态调整heignt属性的解决办法，使用vue watch监听，直接贴代码。
1.设置屏幕高度变量
在这里插入图片描述
2.在mounted计算属性中给屏幕高度变量赋值
在这里插入图片描述
3.使用watch监听屏幕高度变化并调整自己想要改变div中的高度
在这里插入图片描述
这种方式仅针对于那种height属性百分比不生效，但是用具体的例如height:500px生效的结果

ylfedoc
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中监听div的宽高变化
蜗牛~~
04-27 1万+
又是一个新知识点，撸起袖子开始干！！！ 1、在vue中安装一个插件 npm install element-resize-detector
浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)
song_song0927的博客
04-12 3615
js控制页面随浏览器放大缩小,页面布局不变,按住ctrl,滑动滚轮放大浏览器百分比时,页面放大至左上角,缩小百分比时,页面缩小至中间
element table组件根据屏幕大小动态设置max-height属性设置表格最大高度，但设置百分比或者响应式不生效的问题
二三的博客
12-06 1万+
element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。 max-height:calc(100vh - 40px) //或者 max-height:calc(100% - 40px) 这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。 解决方法有以下几种： 首先列举出代码： 首先设置table组件的ref属性，以及设.
创建Vue项目后的初始化操作-解决Vue项目中盒子高度100%不生效问题
最新发布
不食花生的猫：http://110.40.191.51/
04-19 597
关于Vue中div盒子高度100%不生效问题的两种解决方式
26，vue基于elementui设置表格动态高度的几种方法
weixin_47254130的博客
07-07 7009
vue基于elementui设置表格动态高度的几种方法 方法一 css + js的形式 1.这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要使用calc来设置高度，然后给表格设置:height="tableH"的属性 <div class="table-wrapper" ref="tableWrapper" v-loading="loading"> <el-table :data="tableData" stripe style="wid
vue项目微信公众号，小屏播放，video层级过高的坑
浅墨
04-17 1666
众所周知，video标签兼容性是真的差，特别是遇到安卓微信浏览器， 小屏播放，video层级过高，视频播放的时候其他HTML被覆盖 <video controls style="object-fit:fill;width: 100%;height: 3.5rem;" class="videosrc" ref="videoPla...
GOM引擎狂暴之力脚本 攻魔道增加30%.血量增加20%脚本
IDC02_Fang的博客
06-13 2863
> ： \ \。 ：\ \。 ：\ \。INC N$上线血量 MUL N$狂暴血量 20。
vue中更改数组中属性,在页面中不生效的解决方法
10-16
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决在vue项目中webpack打包后字体不生效的问题
10-18
总的来说，解决Vue项目中Webpack打包后字体不生效的问题主要涉及CSS编写习惯、Webpack配置以及浏览器兼容性。选择适合项目需求的方法，可以确保字体在生产环境中的正确显示。在开发过程中，及时检查控制台的元素样式...
解决vue中对象属性改变视图不更新的问题
08-27
下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue addRoutes不生效问题
10-14
- **动态添加路由**：在Vue应用中，我们可以在运行时根据需求动态添加路由，这通常发生在用户权限确定后，比如在登录成功时。 - **路由冲突**：当两个或多个路由定义有相同的路径或组件时，会出现路由冲突，这可能...
vue中动态添加class修改div宽高无法触发addEventListener(“resize“)
mmiaoChong的博客
07-06 644
vue在触发事件动态修改class发现resize没有触发。
Vue 监听div高度方法
qq_42753983的博客
09-14 1723
Vue 动态监听div高度
GEE：创建新的Feature并设置相应属性
GEE水生态空间
02-14 2892
Earth Engine 中的一个Feature被定义为 GeoJSON 特征。具体来说，a Feature是具有geometry存储 Geometry对象（或 null）的properties属性和存储其他属性字典的属性的对象。但如何在GEE中创建一个Feature，并为其赋予相应的属性？
vue codemirror 设置高度无效的解决办法
糯米鸡的博客
07-03 1381
最近使用vue-codemirror发现设置高度怎么都不生效，网上的办法都用了也不行，最后终于摸索出解决办法 首先是坑 不能使用scss, 只有使用css才有效 要给.CodeMirror-scroll设置高度，给.CodeMirror设置高度无效 <template> <div class="root"> <div class="my"> <codemirror ref="myCm" v-m
屏幕自适应问题：设置方式（百分比减去固定值）
weixin_34335458的博客
05-22 783
自适应：项目中使用定位将元素放在指定位置，浏览器窗口缩小布局不变，即元素位置布局不变：格式： calc(100% - 450px)//此处100%为屏幕宽度，450px是元素的指定宽度，将该字符串作为值给元素的top、left、height等属性即可实现窗口缩小时也能做到自适应注意格式：left：“calc(100%-200px)” ,需要使用双引号，否则报错，一般用于行内。可将元素放在任...
【bug】vue-screenfull全屏时页面高度未自适应，已解决
花椒和蕊的博客
01-30 1231
bug收录
Vue中给style绑定动态值
热门推荐
qq_36811160的博客
09-22 1万+
以绑定style高度为例，高度为当前屏幕的高度 1、定义style <div :style="{width: '100%',height: screenHeight,border: '1px solid rebeccapurple', color: 'red', display: 'flex'}"> </div> 2、获取屏幕的高度 在computed属性中获取屏幕的高度 computed: { screenWidth: function () {
CSS 宽高度百分比数减去固定像素值无效的解决办法（例：100%-60px）
sea9528的博客
07-13 1121
uniapp 想设置列表栏高度不同设备自动切换，结果发现下面这样写没有效果。 //uni-app .item-list { height: calc(100vh-120rpx) ; } 查资料发现 calc（ x - y ） 减号两边要有空格才生效 //uni-app .item-list { height: calc(100vh - 120rpx) ; } ...
vue 根据屏幕高度适配
09-16
### 回答1： Vue 可以结合 CSS3 的 `vh` 单位和 JavaScript 获取屏幕高度来实现根据屏幕高度适配。 具体操作如下： 1. 在 CSS 中使用 `vh` 单位来设置元素高度。`vh` 单位是指相对于视口高度的百分比单位，例如 `height: 50vh` 表示元素高度为视口高度的一半。 2. 在 Vue 组件中使用 `mounted` 生命周期钩子获取屏幕高度，并将其存储到组件的数据中。 ```javascript mounted() { this.screenHeight = window.innerHeight; }, data() { return { screenHeight: 0 } } ``` 3. 在模板中使用数据绑定将获取到的屏幕高度应用到需要适配的元素上。 ```html <div :style="{ height: screenHeight + 'px' }">需要适配的元素</div> ``` 这样就可以根据屏幕高度实现适配了。需要注意的是，当屏幕大小变化时，应该使用 `resize` 事件重新获取屏幕高度并更新数据。 ### 回答2： Vue可以根据屏幕高度自适应，主要通过CSS和响应式设计来实现。 首先，在Vue组件中，可以通过使用计算属性来获取屏幕高度。可以使用window对象的innerHeight属性来获取浏览器窗口的高度，并将其存储在data属性中。 ```js export default { data() { return { screenHeight: 0 } }, computed: { styleObject() { return { height: `${this.screenHeight}px` } } }, mounted() { this.screenHeight = window.innerHeight window.addEventListener('resize', () => { this.screenHeight = window.innerHeight }) } } ``` 然后，在模板中可以使用计算属性的值来动态设置样式，从而实现根据屏幕高度进行适配。 ```html <template> <div :style="styleObject"> <!-- 内容 --> </div> </template> ``` 上述代码中，我们在mounted钩子函数中监听窗口的resize事件，并在事件回调函数中更新屏幕高度的值。这样，无论窗口大小如何改变，屏幕高度都能被动态更新。 最后，将计算属性styleObject应用在需要适配的元素上，样式对象中的高度会根据屏幕高度进行动态调整。 这样，Vue就可以根据屏幕高度来适应不同的设备，保证页面在不同屏幕上的显示效果。 ### 回答3： 在Vue中根据屏幕高度适配可以通过几种不同的方法来实现。一种常见的方法是使用CSS样式来动态调整元素的高度。可以在Vue组件中使用计算属性或绑定样式来实现这个功能。 首先，可以使用计算属性来获取屏幕的高度。可以通过在Vue实例中的`created`或者`mounted`生命周期钩子中获取屏幕高度，并将其保存为一个计算属性。例如： ``` computed: { screenHeight() { return window.innerHeight; } } ``` 然后，可以在模板中使用绑定样式来根据屏幕高度调整元素的样式。可以使用`:style`绑定来设置元素的高度。例如： ``` <div :style="{ height: screenHeight + 'px' }"> 这个元素的高度将根据屏幕高度而定 </div> ``` 这样，当窗口的大小改变时，元素的高度将会自动调整以适应屏幕的高度。 另外，还可以使用第三方库，例如`vue-screen-size`，来更方便地获取屏幕的高度。这个库可以在Vue组件中直接使用`screenHeight`属性来获取屏幕高度。例如： ``` import {screenHeight} from 'vue-screen-size'; export default { data() { return { screenHeight: screenHeight, }; }, }; ``` 然后在模板中同样可以根据屏幕高度来设置元素的样式。例如： ``` <div :style="{ height: screenHeight + 'px' }"> 这个元素的高度将根据屏幕高度而定 </div> ``` 以上是两种常用的在Vue中根据屏幕高度适配的方法，根据具体的项目需求选择适合的方式来实现。总的来说，通过获取屏幕高度并将其与元素样式绑定，可以实现在Vue中根据屏幕高度适配的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值