jquery - 居中 DIV 并根据浏览器尺寸进行调整

Question

我正在构建一个嵌入流媒体视频的网页。我想将视频水平和垂直居中，同时调整视频大小(基于浏览器大小，而不是手动)以填充可用的屏幕空间。

这是棘手的部分；此页面有一个 60px 高度的导航，视频必须是 16:9。我希望能够将最小宽度和最小高度设置为 800 像素宽度和 450 像素高度。视频不能与导航重叠，所以如果它在垂直方向上稍微偏离中心一点也没关系。如果需要，我可以使用 jQuery，尽管 CSS(3) 更可取。此页面主要供私有(private)使用，因此我不太担心跨浏览器的兼容性。

我不知道如何在这种复杂程度下完成这项工作。我的想法是创建一个填充页面其余部分的 div，并以绝对定位将其置于该 div 的中心。不幸的是，我不知道如何调整它的大小并保持正确的纵横比。如果有帮助，我将在这个元素中同时使用 UStream 和 Justin.tv。

谢谢。

编辑 1:我不知道如何在减去导航的同时让底部的 div 填充页面的其余部分。我以为 height:100%; 会覆盖它，但不幸的是，它覆盖了整个 100% 的页面，包括 60px 的导航。

Answer 1

使用这个 jQuery 插件:FitVids

水平和垂直居中 CSS3 Flexbox (有限的浏览器支持，但正如您所说，这不是问题)

这是代码(没有供应商前缀以简化):

.parent{
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
}

将其应用于视频的父级。

现在导航不应中断居中，但如果它中断，您始终可以绝对定位导航栏。顶部会有一些视频剪辑，但 60 像素还不错。