网上找到三种方法:
一、使用cumputed
首先你务必看Vue的官方文档。涉及到的基础知识有:
绑定内联样式的使用
computed的使用
文档写的都是基础使用。那么在项目实战中如何使用,两步就能实现,下面提供一个参考方案:
需求场景:获取当前手机屏幕高度,设置container div
的可滚动区域范围。
step1: 添加样式绑定
<div class="container" :style="{height: scrollerHeight}"></div>
step2: 添加属性计算
在computed
里添加属性计算。记住 scrollerHeight
不需在data
进行声明。
computed
是啥?请看看computed的使用
computed: {
// 滚动区高度
// (业务需求:手机屏幕高度减去头部标题和底部tabbar的高度,当然这2个高度也是可以动态获取的)
scrollerHeight: function() {
return (window.innerHeight - 46 - 50) + 'px';
}
}
参考:Vue如何设置动态宽度高度或者动态样式
(我自己用的这种方法,很可)
二、根据父容器设置宽度
如果根据父容器设置宽度,则可以将高度设置为0,并将填充-底部设置为百分比,该百分比将根据当前宽度计算:
.img-div {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
}
这在所有主要浏览器中都能很好地工作。
参考:设置高度等于动态宽度(CSS方法)
(没有用过,仅记录)
三、calc()
css 中可以使用 calc()
来动态设置宽高,但是,在表达式中运算符的前后必须要有空格
height:calc(100vh - 80px)