美文网首页
页面自适应/浏览器缩放自适应(不出滚动条)/js获取高度自适应

页面自适应/浏览器缩放自适应(不出滚动条)/js获取高度自适应

作者: 无题syl | 来源:发表于2020-12-02 16:19 被阅读0次

问题描述:
1.上下div,上div高度自适应,要求下面的div高度自适应/下div超出高度显示滚动条
2.当浏览器窗口缩放时,页面高度自适应窗口可见高度
3.对于下面代码,获取div高度,应在合适位置,考虑页面内容是否加载完,不然获取的高度不正确

 var d = document.getElementsByClassName('r-m')
      if (d) {
        this.rHeight = this.pageHeight - d[0].offsetHeight - 130
      }

在dom中有关内容加载完成后在执行获取div高度

  //获取视频详情
    async getDetail() {
      let { data } = await this.$api.getVideoDetail({
        VideoObjectID: this.$route.query.videoId,
      })
      if (data.status == 1) {
        this.obj = data.data
        //console.log(Object.keys(this.obj.ScoreDetail))
        this.getRelated()
        this.getAttach()
************************************
      ****  this.$nextTick(() => {
          this.onResize()
        })
************************************
      }
    },
  created() {
    this.pageHeight = document.documentElement.clientHeight
    **window.addEventListener('resize', this.onResize)**
  },

    //页面布局   监听窗口改变
    onResize() {
      this.pageHeight = document.documentElement.clientHeight
      var d = document.getElementsByClassName('r-m')
      if (d) {
        this.rHeight = this.pageHeight - d[0].offsetHeight - 90
      }
    },

页面布局 style高度中

 <div class="video-warp" :style="{ height: pageHeight + 'px' }"></div>
*******************************************************************
     <div class="v-warp" :style="{ height: rHeight + 'px' }"></div>

相关文章

网友评论

      本文标题:页面自适应/浏览器缩放自适应(不出滚动条)/js获取高度自适应

      本文链接:https://www.haomeiwen.com/subject/ohxuwktx.html