当前位置:网站首页>Split screen bug notes
Split screen bug notes
2022-07-07 13:25:00 【Poplar siege lion】
After the split screen of the previous article , Find the bottom control div Affected by floating , Moved to the top , This is not reasonable , So clear float is set overflow: hidden attribute , But there are new problems , Click on 4 After split screen , Scroll bars appear on the page . It can be seen here that the set width and height are unreasonable , So we need to set it accurately .
First, we need to set the accommodation video Labeled div Size . After the page is loaded , Set by loading the completion event , Bold , Set to accommodate video Labeled div. The following code is the setup sheet video Width and height of label , Due to the margin:2px. So we need to subtract the width and height 4 Pixel .
mounted() {
this.$nextTick(() => {
// Set up
let player = document.getElementsByClassName('player');
console.log(player);
player[0].width = window.innerWidth - 400;
player[0].height = window.innerHeight - 80 - 60;
let vi = document.getElementById(1);
vi.width = window.innerWidth - 400 - 4;
vi.height = window.innerHeight - 80 - 60 - 4;
vi.margin = 0;
})
},
Moreover, setting video Just float the label , Here's one bug, At first, I set it to include video Labeled div float , There will be div And video There will be a gap between , So you can only set video Floating of labels
overflow: hidden;
background-color: aquamarine;
.video-content-1 {
//float: left; // Cannot set div Floating of , Will be in video There is a gap between
display:inline;
video {
float: left;
// width: 1520px - 4px;
// height: 849px - 60px;
margin: 2px;
padding: 0;
object-fit: fill;
border-width: 2px;
border-color: aqua;
box-sizing: border-box;
}
}
边栏推荐
猜你喜欢
数字ic设计——SPI
Introduction and basic use of stored procedures
为租客提供帮助
Storage principle inside mongodb
分布式事务解决方案
提升树莓派性能的方法
我那“不好惹”的00后下属:不差钱,怼领导,抵制加班
My "troublesome" subordinates after 00: not bad for money, against leaders, and resist overtime
单片机学习笔记之点亮led 灯
1. Deep copy 2. Call apply bind 3. For of in differences
随机推荐
API query interface for free mobile phone number ownership
Pay close attention to the work of safety production and make every effort to ensure the safety of people's lives and property
PACP学习笔记三:PCAP方法说明
Cinnamon Applet 入门
国泰君安证券开户怎么开的?开户安全吗?
PACP学习笔记一:使用 PCAP 编程
基于鲲鹏原生安全,打造安全可信的计算平台
COSCon'22 社区召集令来啦!Open the World,邀请所有社区一起拥抱开源,打开新世界~
“新红旗杯”桌面应用创意大赛2022
My "troublesome" subordinates after 00: not bad for money, against leaders, and resist overtime
Signal strength (RSSI) knowledge sorting
Shortcut key of Bash
简单好用的代码规范
工具箱之 IKVM.NET 项目新进展
Pcap learning notes II: pcap4j source code Notes
Read PG in data warehouse in one article_ stat
Conversion from non partitioned table to partitioned table and precautions
《开源圆桌派》第十一期“冰与火之歌”——如何平衡开源与安全间的天然矛盾?
Read PG in data warehouse in one article_ stat
Why can basic data types call methods in JS