项目背景:靠近浏览器窗口的各个方向(左上、下、左、右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对pc端垂直方向上的定位)

1、百分比:easyui的window窗口定位方式:设置left和top的值即可;(left可直接写指定值px;top不能写px,因为各个分辨率下的浏览器窗口距离上面的值是不固定的。考虑到此top值写成百分数,原以为百分数可以解决此问题了,结果在不同屏幕大小的浏览器窗口中依然有细微差距)

2、js:easyui的window窗口只能设置left和top的值,然而top值不好设置,于是想到使用js获取当前浏览器窗口的可见高度,再使用该高度减去操作元素的高度,不就能具体定位垂直方向上的位置了?

created() {
  var bodyheight = Number(document.body.clientHeight); //浏览器可见窗口的高度
var bodywidth = Number(document.body.clientWidth);//浏览器可见窗口的宽度
  console.log(bodyheight);
//this.win.top=bodyheight-60;(60为被操作组件的高度)
},
用以上方法确实可以做到垂直方向上的指定定位,且兼容pc端不同屏幕大小。但是新的问题出现:
当改变当前浏览器窗口大小时,使用该方法实现定位的组件位置偏移得离谱,需要刷新当前窗口,才能恢复到正常状态!(效果达到了,但是用户体验极差,这样肯定不行)

3、使用定位:position:fixed/absolute;设置bottom的值,且使用px作为单位,解决了不同大小屏幕的准确定位以及不用二次刷新的问题!

最新文章

  1. [AS3.0] NetConnection.Connect.Rejected 解决办法
  2. go git 安装配置与使用 (windows 7 64bit)
  3. 如何用Nsight调试C# OpenGL程序
  4. CentOS安装Chrome
  5. iOS KVC/KVO/KVB
  6. [Hive - LanguageManual] Create/Drop/Alter Database Create/Drop/Truncate Table
  7. excel vba 打印设置(转)
  8. cas sso原理(转)
  9. Builder模式的几个要点
  10. 简单计算器(Android)
  11. c++日历v1.0版本
  12. iOS开发网络篇之文件下载、大文件下载、断点下载
  13. NYOJ 138 找球号(二) bitset 二进制的妙用
  14. python3,进程间的通信
  15. iOS开发之字数不一的多标签Demo
  16. DevOps实践之一:基于Docker构建企业Jenkins CI平台
  17. mysql性能监控软件pmm
  18. 站在Web3.0 理解IPFS是什么
  19. JSP总结(二)—Cookie(汇总)
  20. Linux 内核 hlist 详解

热门文章

  1. 电影的微信小程序
  2. Spring → 02:开发初步
  3. PHPCMS快速建站系列之在线留言
  4. 闲鱼Flutter&FaaS云端一体化架构
  5. sqlplus连接数据库报错SP2-0642: SQL*Plus internal error state 2130, context 0:0:0解决
  6. C++运行时类型识别
  7. linux环境变量设置和默认执行语句设置
  8. 25-3 requests模块的cookie和代理操作
  9. 日志 5.27 关于AssetBundle
  10. 使用DataX同步MaxCompute数据到TableStore(原OTS)优化指南