Question

我使用容器流体创建了一个覆盖整个首页的标题。它适用于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

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

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

Answer 2

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

http://www.bootply.com/z5XcRLL4O0

容器流体不适用于Chrome和平板电脑大小的屏幕

2 个答案: