1.css高度、宽度计算
width: calc(50%);
height: calc(100vh - 53px);
.divSlot {
height: calc(100vh - 100px);
overflow-y: auto
}
2.vue3中监听浏览器屏幕,计算区域的大小
onBeforeMount(()=>{
// 监听dom元素
window.addEventListener('resize', methods.getDomWidth);
methods.getDomWidth()
})
// 动态高度宽度
getDomWidth() {
/*浏览器高度-你的界面元素*/
let vueWidth = document.body.clientWidth
let vueHeight = document.body.clientHeight
state.height = vueHeight - 52 - 70
},
非IE浏览器,CSS3规范:
①水平方向,从左到右(默认):writing-mode: horizontal-tb;
②垂直方向,从左到右: writing-mode: vertical-lr;
③垂直方向,从右到左: writing-mode: vertical-rl;
/*div字体显示*/
.div_show_font {
text-align: center;
margin-top: auto;
margin-bottom: auto;
writing-mode: horizontal-tb;
}
/*div竖向排列*/
.vertical-div {
-ms-writing-mode: bt-rl;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
}