javascript - 我如何将 css 高度与浏览器窗口的大小对齐？

Question

好的，所以我想放置一个视频，使其高度为浏览器窗口的 100%，但不是视频，所以视频高度不是 1080 像素(带滚动条)，而是相对于浏览器高度的高度窗口是。 这是我当前的样式(有效):

video {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

我希望它看起来像这样:

--意思是没有填充和没有滚动条。我试过视口(viewport)高度 css 属性，但这会导致滚动条。上述代码确实产生了我正在寻找的结果，但它是做这种简单事情的一种极其低效的方法，我不知道它是否会在其他浏览器中以相同的方式显示。这是live ...
有 JavaScript 替代品吗？或者更好的纯 css？

Answer 1

正常文档流中元素的高度百分比仅在祖先元素已明确设置其高度时才起作用。

但是，要跳过所有这些，将其设置为视口(viewport)高度的 100%:

height:100vh;