Vue中尽量不使用dom的高度计算

  1. <template>
  2.   <div :style="conheight">
  3. </template>
  4. <script>
  5.   export default{
  6.     data(){
  7.       conheight:{
  8. height:''
  9. }
  10.     },
  11.     methods:{
  12. getHeight(){
  13. this.conheight.height=window.innerHeight-170+'px';
  14. },
  15.     created(){
  16. window.addEventListener('resize', this.getHeight);
  17. this.getHeight()
  18. }
  19.   }
  20.  
  21. </script>

Vue中div高度自适应的更多相关文章

  1. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  2. div中宽高度自适应文字换行居中问题解决

    <html> <head> <meta charset="UTF-8"/> <title>div中宽高度自适应文字换行居中demo& ...

  3. div高度自适应(总结:min-height:100px; height:auto;的用法)

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  4. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  5. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  6. winform中dataGridView高度自适应填充完数据的高度

    // winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度是根据数据的多少而变动. 在load的时候,数据绑定后,加上如下代码: ...

  7. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  8. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  9. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

随机推荐

  1. 2018 L2-027. 名人堂与代金券【结构体排序】

    L2-027. 名人堂与代金券 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 对于在中国大学MOOC(http://www.i ...

  2. Network | 802.1x

    IEEE 802.1X是IEEE制定关于用户接入网络的认证标准(注意:此处X是大写),全称是“基于端口的网络接入控制”,属于IEEE 802.1网络协议组的一部分.于2001年标准化,之后为了配合无线 ...

  3. 某考试 T2 Seg

    Seg [问题描述]数轴上有n条线段,第i条线段的左端点是a[i],右端点是b[i].Bob发现1~2n共2n个整数点,每个点都是某条线段的端点.这些线段有如下两类特点:1 x y,表示第x条线段和第 ...

  4. WinSCP介绍、安装、使用(转)

    http://blog.csdn.net/liang19890820/article/details/49700931 前言 如果说XManager通过Xshell.Xftp可以很方便的进行远程管理, ...

  5. ios内存管理笔记(二)

    1)实现部分: 复制代码 @synthesize window=_window; @synthesize viewController=_viewController; 通常看到的都没有包含=部分,@ ...

  6. 【spring boot】8.spring boot的日志框架logback使用

    在继续上一篇的Debug调试之后,把spring boot的日志框架使用情况逐步蚕食. 参考:http://tengj.top/2017/04/05/springbo 开篇之前,贴上完整applica ...

  7. Oracle Linux 6.4(BOND)双网卡绑定实战—附加说明

    操作环境Oracle Linux Server release 6.4内核Linux rac1 2.6.39-400.17.1.el6uek.x86_64 [root@RAC-2 ~]# vi /et ...

  8. selenium firefox46.0.1设置禁用图片

     firefox_profile = webdriver.FirefoxProfile()firefox_profile.set_preference('permissions.default.ima ...

  9. 安装nagios

    第二部分.apache的安装 615  tar zxvf httpd-2.2.9.tar.gz   616  cd httpd-2.2.9  617   ./configure --prefix=/u ...

  10. 微信开源组件WCDB漫谈及Demo

    代码地址如下:http://www.demodashi.com/demo/12422.html 前言 移动端的数据库选型一直是一个难题,直到前段时间看到了WeMobileDev(微信前端团队)放出了第 ...