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

【问题标题】：How would I align css height to size of browser window?如何将 css 高度与浏览器窗口的大小对齐？
【发布时间】：2017-12-23 23:39:00
【问题描述】：

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

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

我希望它看起来像这样：

--表示没有填充和没有滚动条。我已经尝试过视口高度 css 属性，但这会导致滚动条。上述代码确实产生了我正在寻找的结果，但它是一种非常低效的方法来做这样一个简单的事情，我不知道它是否会在其他浏览器中以相同的方式显示。这是live...
有 JavaScript 替代方案吗？还是更好的纯 CSS？

【问题讨论】：

您可以使用 SASS 定义纵横比。
Rick Astley 不是最好的例子 ;)。另外你为什么使用 4:3 视频？
我想要黑色边框在两侧，而不是在顶部，如图所示。

标签： javascript css alignment

【解决方案1】：

文档正常流程中元素的百分比高度仅在祖先元素的高度已明确设置时才有效。

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

height:100vh;

【讨论】：

我测试了“video {text-align: center; height: 100vh;}”，结果还是出现了滚动条。
@Henry7720 - text-align 需要位于包含块元素（即主体）上，而不是视频元素上。要摆脱滚动条，请使用video {vertical-align:top;}
@Henry7720 另外，请记住，box-model 中的默认大小是在设置元素的height 或width 时不考虑填充、边框和边距。

【解决方案2】：

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

 html, body {
width: 100%;
height: 100%;
margin: 0;
 padding: 0;
 

            }
#fullscreen-video{
  width:100%;
height:100%;
  background-color:green;
  overflow:hidden;
}

<div id="fullscreen-video">
<iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/A3PDXmYoF5U" frameborder="0" allowfullscreen></iframe>
</div>

【讨论】：

在html, body 上设置width:100% 没有区别，因为这是默认值，如果fullscreen-video 有更多的祖先层，那么这些元素中的每一个都必须设置它们的height如果使用百分比。

【解决方案3】：

Alohci 解释说我应该使用vertical-align: top; 删除滚动条，在他的帮助下以及来自Scott Marcus 和Timothy 的其他答案。所有收到的答案都很有帮助，并有助于看到here的最终答案。
所以，我的previous css：

body {
  background-color: #000000;
}

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

还有我的新 css：

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

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

【讨论】：