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

8 篇文章 0 订阅

最近敲代码遇到一个小问题,如图:
当页面内容不够多时,会出现底部栏上移的问题。
当页面内容不够多时,会出现底部栏上移的问题。
一开始我想到的解决方式时,获取到屏幕的高度,并将它赋值为中间的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:尽管如此,但是对于上面代码所出现的问题,博主还是没(懒)有(得)搞清楚,所以如果有大佬知道原因的话,可以评论指导一下小弟。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值