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

好的，我想放置一个视频，使它的高度是浏览器窗口的100%，但不是视频，所以视频高度不是1080px，而是相对于浏览器窗口的高度。 以下是我当前的样式，它可以工作：

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

我希望它看起来像这样：

-这意味着没有填充和滚动条。我尝试了viewport height css属性，但这会导致出现滚动条。上面提到的代码确实产生了我想要的结果，但这是一种非常低效的方法来完成这样一件简单的事情，我不知道它是否会在其他浏览器中以同样的方式显示。这是。。。

---

有JavaScript替代方案吗？或者更好的纯css？

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

但是，要跳过所有这些，请将其设置为视口高度的100%：

height:100vh;

---

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

但是，要跳过所有这些，请将其设置为视口高度的100%：

height:100vh;

---

重置主体和HTML标记，然后您可以使用100%并获得真正的100%高度和宽度

html，正文{ 宽度：100%； 身高：100%； 保证金：0； 填充：0； } 全屏视频{ 宽度：100%； 身高：100%； 背景颜色：绿色； 溢出：隐藏； }

---

重置主体和HTML标记，然后您可以使用100%并获得真正的100%高度和宽度

html，正文{ 宽度：100%； 身高：100%； 保证金：0； 填充：0； } 全屏视频{ 宽度：100%； 身高：100%； 背景颜色：绿色； 溢出：隐藏； } 说明我应该使用垂直对齐：顶部；要删除滚动条，请在他的帮助下以及和中的其他答案。所有收到的答案都很有帮助，并有助于最终的答案。 因此，我以前的css：

还有我的新css：

说明我应该使用垂直对齐：顶部；要删除滚动条，请在他的帮助下以及和中的其他答案。所有收到的答案都很有帮助，并有助于最终的答案。 因此，我以前的css：

还有我的新css：

---

我测试了视频{text align:center；height:100vh；}，但它仍然导致滚动条。@Henry7720-text align需要位于包含的块元素（即主体，而不是视频元素）上。为了摆脱滚动条，还可以使用video{vertical align:top；}@Henry7720，记住框模型中的默认大小是在设置元素的高度或宽度时不考虑填充、边框和边距，它仍然导致滚动条。@Henry7720-文本对齐需要在包含块元素（即正文）上，而不是在视频元素上。要摆脱滚动条，请使用video{vertical align:top；}@Henry7720。另外，请记住，框模型中的默认大小是在设置元素的高度或宽度时不考虑填充、边框和边距。您可以使用SASS定义纵横比。Rick Astley不是最好的使用示例；。还有，为什么要使用4:3视频？我希望在侧面使用黑色边框，但不希望在顶部使用，如图所示。您可以使用SASS定义纵横比。Rick Astley不是最好的示例；。还有，为什么要使用4:3视频？我希望在侧面使用黑色边框，而不是在顶部，如图所示。在html上设置宽度：100%，主体没有区别，因为这是默认值，如果全屏视频有更多的祖先层，如果使用百分比，则这些元素中的每一个都必须设置其高度。在html上设置宽度：100%，正文没有区别，因为这是默认值，如果全屏视频有更多的祖先层，则这些元素中的每一个都必须设置其高度（如果使用百分比）。

body {
  background-color: #000000;
  margin: 0;
  text-align: center;
}

video {
  vertical-align: middle;
  height: 100vh;
}