Container-fluid 在 Chrome 和平板电脑大小的屏幕上不起作用答案

【问题标题】：Container-fluid not working on Chrome and tablet-sized screenContainer-fluid 在 Chrome 和平板电脑大小的屏幕上不起作用
【发布时间】：2016-04-10 04:42:12
【问题描述】：

我使用 container-fluid 创建了一个覆盖整个首页的页眉。它在 Opera、Firefox 和 Microsoft Edge 上运行良好，但在 Chrome、iPad 和手机屏幕上，标题并没有覆盖整个设备，它更短。

这是我的代码：

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

还有 CSS：

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

.container-fluid {
       padding: 60px 50px;
}

我能做些什么来解决这个问题？谢谢。

编辑：添加屏幕截图：

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

chrome full screen laptop

Chrome 小屏幕 - 平板电脑大小 chrome small screen tablet-size

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

【问题讨论】：

能否添加一些正确/错误页面显示的截图？
为什么这个问题被否决了？

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

删除给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;
}

【讨论】：

这解决了 Chrome 的问题，但移动设备和平板电脑屏幕现在在标题上方（导航栏下方）有一条白线。
可以分享一下截图吗？可能有其他干扰
你可以提供任何一个或两个都可以
添加了截图。除了我已经发布的代码之外，我还应该发布什么其他代码？对不起，愚蠢的问题，这是我第一次尝试网站，我正在尽我所能。
我建议您使用适当的 Web 服务器，例如 apache 或 iis。 Apache 可以安装在一个名为 wampserver 的捆绑软件中，尝试通过该软件加载文件

【解决方案2】：

制作 jumbotron height: 100%; 使其充满屏幕。当然，这可能会扭曲背景图像的比例。

http://www.bootply.com/z5XcRLL4O0

【讨论】：

感谢您的提示，但很遗憾，它并没有改变任何事情。