Css 在移动设备上快速响应引导转盘图像生成滚动

我正在尝试使用一个响应迅速的引导转盘，但出于某种原因，我似乎在手机上得到了一个“滚动”。有人能给我提个建议吗

链接如下：

幻灯片图像设置为背景，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”上。如果我把这个放低，底部会有一个白色的边框

有没有办法使旋转木马幻灯片响应，而不出现滚动或白色间隙？

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

看起来好像你遇到了vh“修复”，我相信现在至少在iOS和Android上实现了

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

到目前为止，我唯一能绕过它的方法是将高度设置为略低于100vh。我一直很懒，所有的网站都是这样，所以有些网站的页脚比其他网站要高。如果能听到一个合适的CSS方法，那么你会很高兴的

带有可变vh的设备获取页脚时没有一行，因此它使用CSS variavpbleswhite

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

更新：中介绍了Javascript解决方法

在您的

高度：100vh

之后再放一行

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

如果用户改变了设备的方向，让这个JS在加载时运行（并调整大小）

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

---

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

width: auto;

---

谢谢你的评论，先生！这不是一个完整的答案，但它是：-）如果有人知道一个工作，请让我知道。我似乎在任何地方都找不到链接。一点JavaScript可能会有所帮助，但你的问题没有标记JavaScript。可以接受使用一点吗？我刚刚遇到了这种只使用[link]CSS的方法，但我不太愿意回答，因为我非常不确定跨浏览器的长期支持问题是什么，我怀疑我并不完全理解它。下面是它所做的{min height:100vh；/*移动视口错误修复*/min height:-webkit fill available；}html{height:-webkit fill available；}有一个JS解决方法，请参阅我答案的更新，但我不知道这是否可以接受，因为这个问题只标记为css。