vue div自适应高度

第一种:利用弹性盒子flex特性
在这里插入图片描述


<template>
  <div class='container'>
    <div class="divContent">
      <div class="div1">1高度可固定也可不</div>
      <div class="div2">2基于父元素固定高度本身的高度自适应</div>
      <div class="div3">3高度可固定也可不</div>
    </div>

  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
    }
  },
  methods: {
  }
})
</script>

<style scoped lang='scss'>
  .container{
    height: 100vh;
    width: 100%;
    .divContent{
      height: 50%;
      width: 40%;
      border: 1px solid #f0f0f0;
      display:flex;
      flex-direction: column;
    }
    .div2{
      flex:1;
    }
    .div1,.div3{
      // height: 300px;
      background-color: #f0f0f0;
    }
  }
</style>

第二种:监听其他元素高度
在这里插入图片描述

npm install element-resize-detector --save

完整代码为:

<template>
  <div class='container'>
    <div class="divContent">
      <div :style="[{height:divHei+'px'}]" class="div2">在父元素高度固定的情况下根据元素2高度自适应</div>
      <div id="content2" :class="flag?'div3':'div1'">元素2 <i @click="flag=!flag" style="cursor:pointer" class="el-icon-download"></i></div>
    </div>

  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import elementResizeDetectorMaker from 'element-resize-detector'
export default Vue.extend({
  data () {
    return {
      divHei: 0,
      flag: false
    }
  },
  mounted () {
    const self = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('content2'), element => {
      self.$nextTick(() => {
        this.divHei = 300 - element.clientHeight
      })
    })
  },
  methods: {
  }
})
</script>

<style scoped lang='scss'>
  .container{
    height: 100vh;
    width: 100%;
    .divContent{
      height: 300px;
      width: 40%;
      border: 1px solid red;
      background-color: antiquewhite;
    }
    .div1{
      height: 30px;
      background-color: #f0f0f0;
    }
    .div3{
      height: 100px;
      background-color: #f0f0f0;
    }
  }
</style>
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值