vue通过js来设置div的最小高度所出现的赋值失败问题。

最新推荐文章于 2024-07-12 20:10:03 发布

原创最新推荐文章于 2024-07-12 20:10:03 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #最小高度 #赋值失败 #前端 #坑

踩坑同时被 2 个专栏收录

14 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文探讨了一种在页面内容不足时防止底部栏上移的方法。通过动态调整div的高度，确保footer始终处于页面底部。博主分享了使用Vue.js时遇到的问题及解决方案，包括利用窗口加载事件实时调整高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近敲代码遇到一个小问题，如图：
当页面内容不够多时，会出现底部栏上移的问题。

一开始我想到的解决方式时，获取到屏幕的高度，并将它赋值为中间的div之中，这就能完美解决footer下移的问题了，说干就干。当时写出的代码是这样的：

 mounted(){
    console.log('进行了高度赋值');
    console.log($(document).height()/1.7);
    $("#detail").css("min-height", $(document).height()/1.7+ "px");
  }

这是我一开始的打算，在mounted周期之中获取高度并进行高度赋值。
但是不知道为什么，一直出现赋值不成功的问题。但是当你进行热加载一次之后就会赋值成功。如下（热加载之后，热加载之前和最开始的图一样。）：
在这里插入图片描述
经过研究发现，在第一次进入的时候，最小高度并没有赋值成功：

而当重新热加载之后就赋值成功了：
如下图
目前为什么会出现这个原因还没有搞清楚，但博主能感觉出应该是周期加载那一块的问题。

那么重头戏来了，说完了问题，咱们来说一下解决方法：
博主经过多方查询（百度），得到的方法如下：

给需要设置高度的div添加**:style=“contentStyleObj”**（可修改样式）

	<div class="detail"  id="detail" :style="contentStyleObj">
       <div class="top">
         <div class="title">{{detail.article.title}}这是一个很长很长很长的标题，他真的超级长</div>
         <div class="date">发布日期 : {{ detail.article.publishTime | dateformat('YYYY-MM-DD')}}</div>
       </div>
       <div class="content" id="content" v-html="detail.article.content"></div>
     </div>

在methods之中添加方法，用来给样式赋值

  methods:{
    getHeight(){
      this.contentStyleObj.height=window.innerHeight/1.5+'px';
    }
  },

在created方法之中调用方法，完美解决问题。

  created(){
    this.getHeight()
  },

PS：尽管如此，但是对于上面代码所出现的问题，博主还是没（懒）有（得）搞清楚，所以如果有大佬知道原因的话，可以评论指导一下小弟。