Css 容器液体不适用于镀铬和平板电脑大小的屏幕

我使用容器流体创建了一个标题，它覆盖了整个头版。它在Opera、Firefox和MicrosoftEdge上运行良好，但在Chrome、iPad和手机屏幕上，标题并没有覆盖整个设备，而是更短

这是我的代码：

<div class="jumbotron2" id="top">
     <div class="container-fluid"></div>
</div>

我能做些什么来解决这个问题？ 多谢各位

编辑： 添加屏幕截图：

Chrome全屏笔记本电脑-背景填充整个屏幕

镀铬小屏幕-平板电脑尺寸

---

屏幕越小，标题上方的白线越大。

删除给

jumbotron的填充。

另外，如果您想让

jumbotron

填满整个屏幕，我建议您：

.jumbotron2 {
  background: url(../img/xx.png) no-repeat center center;
  background-size: 100%;
  padding-top: 20%;
  padding-bottom: 20%;
  height:100vh;
  width:100vw;
}

---

使台车

高度：100%因此它会填满屏幕。当然，这可能会扭曲背景图像比率

您能添加一些正确/不正确页面显示的屏幕截图吗？为什么这个问题被否决了？感谢您的提示，但不幸的是，它没有改变任何事情。这解决了Chrome的问题，但移动和平板电脑屏幕现在在标题上方（导航栏下方）有一条白线。您能分享一个屏幕截图吗？可能还有其他干扰你可以提供任何一个或两个都可以做的截图。除了我已经发布的代码外，我还应该发布哪些其他代码？很抱歉问了一些愚蠢的问题，这是我第一次尝试建立一个网站，我正在尽我所能。我建议你使用一个合适的网络服务器，比如apache或iis。Apache可以安装在一个名为wampserver的捆绑软件中，请尝试在该软件上加载文件
.jumbotron2 {
  background: url(../img/xx.png) no-repeat center center;
  background-size: 100%;
  padding-top: 20%;
  padding-bottom: 20%;
  height:100vh;
  width:100vw;
}