缩放元素以适应浏览器窗口

Question

有问题的页面是这样的：http://amytdatta.com/ironic-bironic（密码：tyma）- 这是我制作的新专辑的预发行页面，对不起！

我希望视频和文本导航低于比例并居中到浏览器窗口，而不需要滚动条。我使用min height / max height 尝试了各种方法，但似乎无法获得预期的结果。我猜我不知道要定位哪些元素以及如何定位它们。

非常感谢任何关于良好可靠方法的建议。另外，由于我使用的是 Virb，我只能对 CSS 进行覆盖，所以我不能删除行。

非常感谢。

Answer 1

实际上没有看到您的网站，因为它受密码保护，我会建议以下内容：

您在元素周围设置了一个包装器，在您的情况下是导航和视频。然后将视频和导航的 CSS 设置为具有自动边距。哪个应该水平和垂直居中。您可能希望为 2 个组件添加一个包装器，以使它们很好地堆叠在一起，然后在该包装器上放置一个自动边距，但下面的内容应该已经可以工作了。

HTML：

       <div id="container">
         <div id="nav"><!-- nav here --></div>
         <div id="video"><!--video here--></div>
        </div>

CSS：

#container {
  width:100%;
  height:100%;
}

#video{
  margin:auto;
}

#nav {
  margin:auto;
}