Vue.js动态获取浏览器高度、宽度并进行实时修改DOM元素高度

た入场券 2021-07-26 13:46 1131阅读 0赞

> 需求：项目中有高度、宽度自适应需求，需要适应不同分辨率的高度及宽度，在不同分辨率下效果区别不会很大

**html代码如下：**

<template> 
        <div id="home">
           <div class="head"  > 
                 <v-head></v-head>
           </div>
           
       	   <div class="content" :style="GetWindowInfo" >
                 <router-view></router-view>       
           </div>
        </div>   
    </div>

**js代码如下：**

<script>
    export default { 
      data () { 
    　　return { 
         GetWindowInfo:{ 
                height:'',  //动态获取content高度
                width:''	//动态获取content宽度
            },
    　　}
      },
      methods:{ 
        GetWindowInfo(){ 
                // 获取浏览器高度，减去顶部导航栏的值70（可动态获取）,再减去head-DIV高度值80
            this.GetWindowInfo.height=window.innerHeight-70-80+'px';
            this.GetWindowInfo.width=window.innerWidth+'px';
        }
      },
      created(){ 
        window.addEventListener('resize', this.GetWindowInfo); //注册监听器
        this.GetWindowInfo() //页面创建时先调用一次
      },
      destroyed(){ 
        window.removeEventListener('resize', this.GetWindowInfo)
      }
    }
    </script>

css代码：

<style scoped> .home{ 
    overflow:scroll; 
    text-align: center;
    background: rgb(255, 255, 255);
    
    }
    /*头DIV*/
    .head{ 
    background: #ffffff;
    margin:auto;
    width:1000px;
    height:80px;
    }
    /*内容DIV*/
    .content{ 
    overflow:scroll;
    overflow-x:hidden;
    margin: 0 auto;    
    text-align: center;    
    background: #ffffff;
    }
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，1131人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS--获取元素的高度与宽度

原文网址：[JS--获取元素的高度与宽度\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN] 简介说明本文介绍如何使用JavaScript获取HT

港控/mmm°/ 2024年03月30日 12:24/ 0 赞/ 93 阅读

相关 js 获取浏览器高度和宽度值(多浏览器)

![SouthEast][] IE中： document.body.clientWidth ==> BODY对象宽度 document.body.client

谁借莪１个温暖的怀抱￠/ 2023年01月16日 09:35/ 0 赞/ 157 阅读

相关 UNI-APP_uni-app获取屏幕高度宽度、元素的高度宽度

uni.getSystemInfo(OBJECT) [官方文档][Link 1] 获取屏幕高度宽度 screenWidth 屏幕宽度 screenHe

矫情吗；*/ 2022年12月29日 06:53/ 0 赞/ 792 阅读

相关【VUE系列】获取元素宽度高度等

获取元素宽度给元素绑定个 ref 如 <div ref="divWidth">测试</div> 使用函数获取 //可以输出如下对象，查找到宽度cl

矫情吗；*/ 2022年10月15日 14:54/ 0 赞/ 322 阅读

相关 JS获取浏览器高度和宽度

IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 d

墨蓝/ 2022年07月12日 01:15/ 0 赞/ 293 阅读

相关获取浏览器高度和宽度

javascript方法 IE中： document.body.clientWidth ==> BODY对象宽度 document.body.

客官°小女子只卖身不卖艺/ 2022年06月18日 10:25/ 0 赞/ 296 阅读

相关 javascript获取浏览器高度和宽度

原文地址：[http://blog.snsgou.com/post-574.html][http_blog.snsgou.com_post-574.html] ![o_cli

r囧r小猫/ 2022年06月15日 07:23/ 0 赞/ 328 阅读

相关 js获取浏览器高度宽度

/\\ \计算客户端高度 \\/ function getWinHeight() \{ if (window.innerHeight) \{ r

系统管理员/ 2022年04月18日 03:38/ 0 赞/ 343 阅读

相关 vue获取dom元素高度的方法

获取高度： <div ref="自定义名称" > </div> 要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式

男娘i/ 2021年09月30日 11:02/ 0 赞/ 2001 阅读

相关 Vue.js动态获取浏览器高度、宽度并进行实时修改DOM元素高度

> 需求：项目中有高度、宽度自适应需求，需要适应不同分辨率的高度及宽度，在不同分辨率下效果区别不会很大 html代码如下： <template>

た入场券/ 2021年07月26日 13:46/ 0 赞/ 1132 阅读