响应式引导轮播图像在移动设备上产生滚动答案

【问题标题】：Responsive bootstrap carousel image producing scroll on mobile响应式引导轮播图像在移动设备上产生滚动
【发布时间】：2021-02-11 23:20:38
【问题描述】：

我正在尝试使用响应式 Bootstrap 轮播，但由于某种原因，我似乎在移动设备上获得了“滚动”。有人可以对此提出建议吗？

链接在这里：https://mydigitalmidlands.co.uk/vogue-interiors.co.uk/

幻灯片图片设置为背景，CSS如下：

.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这似乎是高度属性“100vh”的问题。如果我降低它，我们会在底部得到一个白色边框。

有没有什么方法可以让轮播幻灯片做出响应，没有滚动或空白？

【问题讨论】：

有一个 JS 解决方法，请参阅我的答案的更新，但我不知道这是否可以接受，因为问题仅标记为 css。

标签： css bootstrap-4 carousel responsive

【解决方案1】：

（有关 Javascript 解决方法，请参阅答案底部）

您似乎遇到了我认为现在至少在 iOS 和 Android 上实施的 vh“修复”。

也就是说，他们设置了 vh，因此当用户垂直滚动时它不会改变，因为他们在滚动时会遇到跳跃效果，并且顶部的浏览器栏的一部分会随着视口高度的变化而消失。我猜想将其固定为一个值，这样即使视口发生变化它也不会改变是一种妥协。

到目前为止，我解决它的唯一方法是将高度设置为略小于 100vh。我一直很懒惰，并且对所有网站都保持这种状态，所以有些人会看到比其他网站更高的页脚。很高兴听到一个正确的 CSS 方法，这样那些在

具有可变 vh 的设备在页脚中没有一行左右的额外内容。它使用 CSS variavpbleswhite。

我意识到这不是一个完整的答案，因为它没有提供完美的解决方法，但是评论太长了。

更新：https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ 中描述了一个 Javascript 解决方法

在你的height: 100vh之后换行

height: calc(var(--vh, 1vh) * 100);

让这个 JS 在加载时运行（如果用户更改设备方向，则在调整大小时运行

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`)

【讨论】：

谢谢您的评论先生！这不是一个完整的答案，但它是 :-) 如果有人知道解决方法，请告诉我。我似乎在任何地方都找不到链接。
一点 JavaScript 可能会有所帮助，但您的问题没有标记 javascript。用一点可以接受吗？
我刚刚遇到了这个 [link]allthingssmitty.com/2020/05/11/… CSS only 方法，但我犹豫是否将它放在答案中，因为我非常不确定长期支持问题可能是什么浏览器，我怀疑我并不完全理解它。这是它的作用 body { min-height: 100vh; /* 移动视口错误修复 */ min-height: -webkit-fill-available; } html { 高度：-webkit-fill-available; }

【解决方案2】：

这可能看起来有点简单，可能对你不起作用，但几天前我遇到了完全相同的问题，我所做的只是将宽度设置为自动，它起作用了，滚动条在较小的屏幕上消失了：

width: auto;

【讨论】：