I am currently programming a site with a video banner set to fixed positioning in the background, and a div that has absolute positioning slightly covering part of the video on the bottom half. The problem is however, once I add this second div with absolute positioning, the width of the screen becomes bigger under the condition there is a vertical overflow on the screen contained within this div, which in turn messes up the video sizing.
Here is my code:
<div class="row" style="height: 5%;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; box-shadow: 0px 10px 5px #000000; z-index:5; padding:0;">
Search
</div>
</div>
</div>
<div class="container-fluid video" style="height:70%; z-index:5; padding:0; margin:0;">
<div class="row" style="padding:0; margin:0; height: 100%;">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" id="video-container" style="background-color:white; height:100%; padding:0; margin:0;">
<video autoplay="" loop="" style="position: fixed; right:0px; bottom: 0; min-width: 100%; min-height: 100%; transform: translateX(calc((100% - 100vw) / 2));">
<source src="beats/titlescreen.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="container-fluid header" style="background-color: red; position:absolute; height:100%;">
This is a test
</div>
Since I set a height of 100% in the last div seen in the above code, there is a vertical overflow on the page which makes the width slightly bigger than if there was no overflow (if you take away the 'height: 100%;' tag this will become apparent).
I am unsure why this happens, and why it is solely contained to chrome. Any ideas?
Thanks in advance!
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
