react-responsive-carousel 在移动视图中自身下方有不需要的空白答案

【问题标题】：react-responsive-carousel has unwanted white space below itself in mobile viewreact-responsive-carousel 在移动视图中自身下方有不需要的空白
【发布时间】：2021-12-31 18:18:40
【问题描述】：

我正在使用react-responsive-carousel，当我切换到移动视图时，下面有一堆空白。我已经尝试了我能想到的一切来删除它，包括body { overflow-x: hidden }。在开发工具中查看时，似乎是 ul.slider.animated 。

Displaying white space below image carousel

Here 是复制了我的问题的代码框。

【问题讨论】：

那么想要的结果是什么？例如。在 320 像素宽的屏幕上。

标签： css reactjs react-bootstrap react-responsive-carousel

【解决方案1】：

更新：

我刚刚浏览了您的示例，这与我遇到的问题不同，因此我在下面的回答不适用于这个特定问题。

关于您的实际问题，我认为这通常是一个响应性问题，而不是react-responsive-carousel 的任何特定问题。空白的原因是因为您已将轮播幻灯片的高度硬编码为90vh，因此只有一小部分页面大小的轮播幻灯片的纵横比与通向图像的纵横比兼容图片下方没有空格。

这是我的解决方案，虽然这意味着页脚不再固定在底部。

从.page-container 中的styles.css 中删除min-height: 100vh;
从.carousel .slide 中删除height: 90vh; carousel.css
从carousel.css底部的媒体查询中删除.carousel .previous { height: 90vh; }。

这将不再将轮播限制在固定高度，并通过允许页脚始终加入轮播底部来删除空白。如果您确实希望页脚位于底部，那么另一个可能的选项是在footer.css 中设置position: fixed;，并在切换到移动模式时使用纵向图像。但同样，您将不得不处理缩放和纵横比，尽管程度与仅使用横向图像不同。

旧的（和不相关的）答案：

我遇到了类似的问题，对我有用的是将 showThumbs 属性设置为 false，如下所示：

<Carousel showThumbs={false} />

有关额外信息，您在开发工具中寻找的内容如下：

<div class="carousel-root">
    <div class="carousel carousel-slider">...</div>
    <div class="carousel">
        <div class="thumbs-wrapper axis-vertical">...</div>
    </div>
<div>

<div class="carousel carousel-slider"> 是您的内容所在的主要位，<div class="thumbs-wrapper axis-vertical"> 可能是一排缩略图。设置 showThumbs={false} 会删除第二个 div。

【讨论】：