Question

我在2页上使用完全相同的CSS。在这两个页面上，我希望background-image拉伸到页面的全长/宽度。但这仅适用于2页中的1页。

这是有效网页的屏幕截图（在此查看：https://hidden-tundra-8656.herokuapp.com/geared?id=1 ）

这是不起作用的页面的屏幕截图（在此处查看：https://hidden-tundra-8656.herokuapp.com/membership?referer_invite_code=f187b2）

在这两个页面中，所有内容都包含在以下基本布局中：

<div class="container-fluid zero-padding success-container">
  <div class="row-fluid text-center zero-margin">
    <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 center-box">
      <!-- page content -->
    </div>
  </div>
</div>

成功容器的CSS代码

html {
  height: 100%; 
}
body {
  height: 100%;
}
.success-container {
  background-position: center; 
  background-repeat: no-repeat; 
  padding-left:0;
  padding-right:0;
  padding-bottom:0;
  padding-top:0;
  margin-top:0;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: cloudinary-url("jumbotron_camping.jpg", $width: 1000,$crop: "fill", $gravity: "north", $type:"upload")
}

.center-box {
  background-color: white;
  margin-top:10%;
  border: $gray solid 1px;
  padding-top:5%;
  padding-bottom:2%;
}

Answer 1

如果你检查两个页面中的HTML，你会发现CSS工作正常。但是，在第二页中，显示的表单实际上比屏幕的高度长。出于某种原因，它的嵌入方式使得<body>元素无法滚动（您使用iframe或其他内容？）。

背景图像未拉伸到整个站点（rails + bootstrap）

1 个答案: