解决页面高度和宽度问题
大纲
1.宽度界面制定基准宽度
2.screenHeight 和 clientHeight 区别
3.高度页面进入以后监听height属性
1.宽度界面制定基准宽度
因为是左右布局的管理界面,使用做菜单固定,右菜单最小值方法。
注意flex的宽度属性
// flex-basis 属性,结合 flex-grow 和 flex-shrink
flex-basis:xxx // 基准宽度
flex-shrink:0 // 缩小比例 设置为0 不进行缩小
flex-grow:1 // 放大比例 存在剩余空间放大
注意: flex:1
是 flex-grow
、flex-shrink
和flex-basis
三个属性的缩写
flex-grow : 1; // div以与窗口大小相同的比例增长
flex-shrink : 1; // div以与窗口大小相同的比例缩小
flex-basis : 0; // div没有起始值,将根据可用的屏幕大小占用屏幕
2.screenHeight 和 clientHeight 区别
参考:https://blog.csdn.net/u011860431/article/details/99736364
页面可视区域
// 例:document.documentElement.clientHeight
clientHeight //--------------- 网页的高度
scrollHeight //--------------- 元素从内容区域到底部横轴方向滚动条的区域(若没有滚动条则是到菜单栏顶部的高度)
scrollTop //------------------ 滚动了多高
offsetHeight //--------------- 网页内容区到滚动条的顶部高(没有则到菜单栏的高)
window.screen.height //------- 屏幕分辨率高
浏览器窗口
window.innerWidth //---- 浏览器窗口宽度,不包含工具栏,菜单等,仅仅是可视区域dom的width
window.innerHeight //--- 浏览器窗口高度,不包含工具栏,菜单等,仅仅是可视区域dom的height
3.高度页面进入以后监听height属性
mounted () {
window.onresize = () => (() => { // onresize 事件会在窗口或框架被调整大小时发生
let H = document.documentElement.clientHeight
console.log(H, 'HHHHHHHHH')
})()
}