Javascript 使整个页面适合视口

我正试图让整个网站适合视口，所以不需要滚动。索引、音乐和联系人是主要的，其他两个页面链接到外部来源（网站链接在文章底部）

这些都是我尝试过的，但都没有成功。也许我没有正确地实现它们

• 将身体最大高度设置为100vh无效。我将整个页面包装在一个div中，并将其设置为最大高度100vh，但它也不起作用

• 这也没用

     html body {
     margin: 0;
     min-height: 100%;
  }
  

• 与上述选项相同，但这次使用vh而不是百分比

      html body {
     min-height: 100vh;
     position: relative; //the reason I added this one was so later on I can
                          make the footer sticky to the bottom of the page 
     margin: 0;
  }
  

• 我还发现了一个javascript，有人从另一个问题（它只需将css添加到cover div（或者对我来说，是body标签或我包装了所有内容的div容器）中，就可以得到一个等于100视口高度和宽度的css

  var vHeight = $(window).height(),
  vWidth = $(window).width(),
  cover = $('.cover');
  
  cover.css({"height":vHeight,"width":vWidth});
  

这也不管用

关于如何做到这一点，有什么提示或线索吗

链接至网站：

编辑：

HTML

---

若在站点周围放置一个包装容器，然后将其设置为站点的绝对宽度和高度，那个么最好的方法是什么

比如说

.site-container{
    position: absolute;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    top: 0;
}

---

您将集装箱横幅设置为75vh。横幅占据屏幕75%时，您无法将视频放入其中。

您已经将

部分的
高度设置为
75vh
，为什么不将视频高度设置为
25vh
？您还需要删除
主体上的默认
边距
演示问题中布局的HTML标记我添加了HTML和CSS代码。在不同的屏幕尺寸上，视频快照在底部留下了巨大的空白。我添加了一些媒体查询来解决这些问题，但在一些屏幕上，它仍然在快照。我不想以6个不同的媒体查询结束，但我不知道是什么还有什么要做的？我是要给我的媒体查询增加一个范围，还是我缺少了什么？虽然这段代码片段可能是解决方案，但确实有助于提高您的文章质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因。
.body {
    width: 100vw;
    height: 100vh;
    /*IF YOU REALLY WANT TO FORCE THE ISSUE*/
    overflow: hidden;
}

.All subsequent child{
     position: relative;
     width: 100%;
     height: 100%;
}

.site-container{
    position: absolute;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    top: 0;
}

.body {
    width: 100vw;
    height: 100vh;
    /*IF YOU REALLY WANT TO FORCE THE ISSUE*/
    overflow: hidden;
}

.All subsequent child{
     position: relative;
     width: 100%;
     height: 100%;
}