响应式背景图像引导程序

Question

我有一个背景图片，我给定了固定卷轴，我的意思是我在底部创建棒棒，如下图所示：

在这张图片中，底部的粘条，没有响应。

这是我的代码css：

.affix {
  bottom:-1px;
  width: 100%;
  display:block;
  background-size: 100%;
  position:fixed;
  z-index: 9999 !important;
}

这个棒条底部或背景颜色固定滚动在桌面版和移动版中工作正常（如果移动版屏幕尺寸在5,5英寸以上工作正常但在移动版中屏幕尺寸在4英寸以下粘条底部或背景颜色绿色固定滚动没有响应）

我尝试更改元标记视口无效，这是我的元标记视口：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

我使用bootstrap版本3.3.7

如何使棒条底部或背景颜色绿色固定滚动可以响应？

Answer 1

您是否尝试使用html, body { overflow-x: hidden; }隐藏页面的水平溢出？

Answer 2

请你试试看看https://www.w3schools.com/howto/howto_css_fixed_footer.asp

Answer 3

你需要添加left: 0和right: 0

.affix {
    bottom: -1px;
    width: 100%;
    left: 0;
    right: 0;
    display: block;
    background-size: 100%;
    position: fixed;
    z-index: 9999 !important;
}

<button class='affix'>
Button
</button>