盒子的大小和数据的高度自适应

本文介绍如何在前端开发中实现盒子高度根据数据内容自动调整,当数据不足时,盒子高度占据屏幕剩余部分;数据超出屏幕时,启用滚动条。主要步骤包括设置父盒子样式、监听数据列表顶部距离以及在methods中添加相应方法。
摘要由CSDN通过智能技术生成

需求:当数据内容不够,那么盒子的高度就是屏幕的剩余部分
如果数据超出屏幕就出现滚动条

步骤:
1-在请求数据列表的父盒子加上
:style="[{'min-height':wrapperHeight},{height:'inherit'}]"
项目代码:

<div class="item-box" ref="wrap" :style="[{'min-height':wrapperHeight},{height:'inherit'}]">
        <div>
          <p>我是渲染的动态列表...</p>
        </div>
   </div>

2-在mounted 加上监听数据列表顶部的距离

    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrap.getBoundingClientRect().top + 'px';
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)

3-在方法methods中加上方法

 getHeight () {
      let wrapperHeight =
        document.documentElement.clientHeight -
        this.$refs.wrap.getBoundingClientRect().t
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值