Split screen bug notes

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;

        }

    }