VUE项目中CSS设置动态宽度的方法

33 篇文章 1 订阅

网上找到三种方法:

一、使用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)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值