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

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

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

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

关于轮播图内嵌video设置宽高不生效的问题
weixin_45077505的博客
08-17 2504
在一个PC的展示网站轮播banner内嵌视频的时候遇到了这个问题， 问题描述：在css设置video宽高100%的情况下视频没有全屏显示 然后经过查询资料就发现了一个属性 object-fit: fill; 先放上修改后的效果图 可以看到视频是已经完全填充了浏览器的 接下来就来细扒一下这个属性， 首先来了解一下可替换元素： 展现效果不是由 CSS 来控制的元素。这些元素是一种外部对象，它们...
vue设置height:100%无效
子时不睡的博客
07-30 3220
使用vue来创建一个地图样式的组件，在地图组件页面设置了样式，却没有生效 <style> #viewDiv { width: 100%; height: 100%; } </style> 只有上面一部分 height设置成100%，组件中的div的高度应该和父元素也就是App.vue中的div一样，而App.vue中的div父结点是body标签，body标签上一级是html标签，body和html的高度默认是auto，浏览器也不会自动加高度，所以b
table布局 height=100%无效分析
超越梦想的专栏
08-02 6264
table布局 height=100%无效分析 在使用table表格进行页面布局时，经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果，但在最新的浏览器中经常遇到无效，根本原因再于浏览器使用用的工作模式的不同造成的；在Firefox与IE8标准模式下，HTML与Body标签默认是没有高度（即高度为0） ，而是根据其中的内容自适应，如果设置表格的style="hei
在Vue中，height:100%不起作用
weixin_43795761的博客
08-13 1077
在App.vue中添加如下： 切记：是App.vue,不是你写的组件的页面！！！！！
关于用 Vue- cli 创建 vue3 项目在 app.vue 中设置height:100%无效的问题及解决方法
Dream104的博客
08-25 1554
在 index.html 中添加如下代码，即可解决（方法不唯一）
el-table设置表格高度无效
weixin_44692296的博客
01-13 8504
设置表格高度，官网给的很详细 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 因为我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。 效果如图： 是通过css解决的，代码如下： /deep/.el-table{ .el-table__body-wrapper{ height: calc(100% - 48px)!i
vue中设置height:100%无效的问题及解决方法
12-29
在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。 App.vue文件 [removed] export default { name: 'App' } [removed] <style> #app { font-family: '...
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
但是，由于不同设备的屏幕高度差异，直接设定固定数值可能导致在某些设备上显示不全或留有空白。为了适配各种设备，可以使用百分比布局，将HTML、body和`.body-container`的高度都设置为100%，这样`.body-container`...
ant desgin vue 中 a-card 设置高度满屏不生效
05-31
如果在 Ant Design Vue 中设置 `<a-card>` 组件的高度为 `100vh` 后无法铺满整个屏幕，可能是因为 `<a-card>` 组件的父元素也需要设置高度为 `100vh` 才能生效。 一种简单的解决方法是将 `<a-card>` 组件放在一个根...
vue3弹性布局子元素高度百分比
最新发布
03-15
好的，我现在需要解决用户在Vue3中使用Flexbox布局时，如何设置子元素的高度为百分比的问题。首先，我得回忆一下Flexbox的基本概念。Flexbox是一种CSS布局模型，能够有效分配容器内的空间和对齐元素，特别适合响应式...
创建Vue项目后的初始化操作-解决Vue项目中盒子高度100%不生效问题
Jim.kk的笔记
04-19 1204
关于Vue中div盒子高度100%不生效问题的两种解决方式
【Bug日记】Element UI 动态设置表格高度部分表格不生效问题
云间月
04-02 3388
【????Bug日记】Element UI 动态设置表格高度部分表格不生效问题 文章目录【:bug:Bug日记】Element UI 动态设置表格高度部分表格不生效问题:beetle: 问题描述:pushpin: 问题定位与问题原因:checkered_flag: 解决办法 ???? 问题描述        最近利用Element UI开...
echarts高度设置height:100%不起作用
小武的博客
03-15 5013
echarts height:100%不起作用
vue codemirror 设置高度无效的解决办法
我的博客
07-03 1607
最近使用vue-codemirror发现设置高度怎么都不生效，网上的办法都用了也不行，最后终于摸索出解决办法 首先是坑 不能使用scss, 只有使用css才有效 要给.CodeMirror-scroll设置高度，给.CodeMirror设置高度无效 <template> <div class="root"> <div class="my"> <codemirror ref="myCm" v-m
vue中height:100%无效
weixin_49290120的博客
12-23 1603
vue中app根组件设置高度百分百并没有生效。
苹果手机H5页面元素内容高度设置无效
m0_61233367的博客
09-07 821
在该样式中加入 flex-shrink: 0; 试一试。
初学vue，关于height：100%设置，只需三行。
IEDAxiaobai的博客
04-02 1683
我是个小白，我不懂。我试了很多博客的方法，他们自己成功了，我却不行。没办法了，我只善于抄写。论实打实的抄写，最好标准的方法肯定是抄我们引用的组件上面啦，抽屉的组件里就有现实height：100%的方法。 直接上成果 主要： height: 100%; position: fixed; top: 0; bottom: 0; ...
Vue 获取dom元素宽高，给el-table表格设置动态高度:height；最大高度:max-heigh
热门推荐
林中明月间丶
06-04 1万+
https://www.jianshu.com/p/371659eb1fe3 //获取table的宽度 :style="'width:'+dataWidths+'px'" letdataWidth=this.$refs.tab1.offsetWidth;//offsetHeight
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值