weixin_58412143 2022-03-03 10:34 采纳率: 94.4%
浏览 214
已结题

Vue 如何让高度自适应

img


现在是给了flex布局,外层盒子高度是自适应的,但是里面的内容没有


<div class="body-box" v-if="logshow&&hjshow" :style="'height:'+bgheight+'px;'">//父级盒子
            <!-- 第一行数据 -->
            <div class="content-box"  :style="'height:'+((screenHeight-147)/2)+'px;'">
                    //这里是三个小组件横向排列
            <!-- 第二行数据 -->
            <div class="bototm-box">
                    //这里也是三个小组件横向排列
——JS
var screenHeight= document.documentElement.clientHeight;
  var screenWidth=document.documentElement.clientWidth;
  var ratio = screenHeight / 1080;
         console.log(ratio);
  var bgheight=ratio*1080;
  console.log(bgheight);
watch: {
          screenHeight (val) {
            // 为了避免频繁触发resize函数导致页面卡顿,使用定时器
            if (!this.timer) {
              // 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
              this.screenHeight = val
              this.timer = true
              let that = this
              setTimeout(function () {
                // 打印screenWidth变化的值
                console.log(that.screenHeight)
                that.timer = false
              }, 400)
            }
          },
          screenWidth (val) {
            if (!this.timer) {
              this.screenWidth = val
              this.timer = true
              let that = this
              setTimeout(function () {
                console.log(that.screenWidth)
                that.timer = false
              }, 400)
            }
          }
        },
  • 写回答

1条回答 默认 最新

  • iloveozz 2022-03-03 15:54
    关注
    <div style="height:100%"></div>
    

    这样高度就随着父元素自适应啊

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月18日
  • 已采纳回答 3月10日
  • 创建了问题 3月3日

悬赏问题

  • ¥15 快手联盟怎么快速的跑出建立模型
  • ¥20 ros环境下运行orb-slam一直报错
  • ¥15 关于腾讯云服务器中,PHP页面无法打开的问题
  • ¥60 如何把照片修复成原始拍摄图
  • ¥80 Exited too quickly (process log may have details)
  • ¥15 爬知乎登录之后内容加载不出来
  • ¥15 怎么用protues测量通频带
  • ¥15 zepelin使用sparkInterpreter 异常
  • ¥15 paho mqtt 接收不到消息
  • ¥15 函数r关于两个分量y,z方向上的图像,分开画r随y的图像,r随z的图像