视频代码占用完整的浏览器空间

Question

我正在尝试让我的视频在我进入页面时占用整个浏览器大小。但是我看到了下一个<div>

的一点点

以下是该页面的HTML：

以下是video-containter：

的CSS

.video-container {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: no-repeat;
    background-size: cover; 
}

<section> class="index"不包含任何内容：

.index {

}

Answer 1

您是否尝试使用 vw 和 vh ？

.video-container {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: relative;
    background: no-repeat;
    background-size: cover; 
}

• vh（视口高度）
• vw（视口宽度）

Answer 2

使用vh和vw作为@theStreets93建议，但我发现当它应用于body和html时会得到更好的结果，然后将子元素（例如.video-container）设置为100％。通过将relative和.video-container设置为0，制作正文和html absolute以及top, bottom, left, right可以让您完全控制，但它可能会延长和扭曲您的视频所以要相应调整。 margin, padding,和border以及box-sizing: border-box/inherit的重置应该会抵消UA默认值，例如添加到身体的8px margin。

我注意到你的HTML中.video-container不是身体的孩子，而且你也有几个身体的孩子。我建议你修剪一些多余的元素，如果可能的话，将你需要的元素设置为高度或行高为0。如果你能够，你可能还必须解开.video-container。当然，如果其余元素是静态的（即默认为position: static），您可能不必完全剥离。 由于您没有提供适当的演示，因此很难说清楚。 ：\

html, body { 
    box-sizing: border-box; 
    font: 400 16px/1.45 'Source Code Pro';
    position: relative;
    width: 100vw;
    height: 100vh;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0; 
    padding: 0; 
    border: 0;
}

.video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: no-repeat;
    background-size: cover;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}