css - 缩放元素以适合浏览器窗口

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;
}