Javascript 反应灵敏的转盘高度未正确调整

我用的是反应灵敏的旋转木马，它看起来很奇怪

render() {
    return (
      <div className="slider-container">
        <Carousel className="carousel-style" showArrows={true} showThumbs={false} showStatus={false}>
          {this.generateCards()}
          <div className="slider-item-div">
            Test
          </div>
        </Carousel>
      </div>
    );
  }

不幸的是，这就是它所呈现的

我想让高度==100%并填充屏幕。此外，我希望在不将鼠标悬停在左右箭头上的情况下显示左右箭头，如下所示：

---

如果您希望此旋转木马填满屏幕，则应通过以下CSS调整来实现：

.slider-container {
width: 100%;
height: 100%;

/* Add this */
position:fixed;
top:0;
left:0;

}

---

更改CSS和滑块容器的固定位置

.slider-container {
    width: 100%;
    height: 100%;
    position:fixed; /* add this code for position fixed */
    top:0px; /* set top and left 0 */
    left:0px;
}
.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}
.carousel-style {
    height: 100% !important;
}

---

这实际上可能是一个错误，因为当我更改高度像素时，它会调整，但如果我为其设置百分比以匹配父对象，它不会做任何事情

为什么不尝试一下，这将有助于查看HTML是否正确呈现！在arrow类ike

.carousel.controlarrow{opacity:1！important；}设置不透明度

对不起，我应该更清楚一些。此滑块位于父div中，我希望它填充该div。不幸的是，您的建议没有完全做到这一点：(

.slider-container {
    width: 100%;
    height: 100%;
    position:fixed; /* add this code for position fixed */
    top:0px; /* set top and left 0 */
    left:0px;
}
.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}
.carousel-style {
    height: 100% !important;
}