反应响应轮播高度未正确调整

Question

我正在使用反应响应式轮播，它看起来很奇怪

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>
    );
  }

这是CSS

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

.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}

.carousel-style {
    height: 100% !important;
}

不幸的是，这就是它呈现的内容

我希望高度 == 100% 并填满屏幕。另外，我希望显示左右箭头，而不将鼠标悬停在它们上方，如下所示： http: //react-responsive-carousel.js.org/#demos

Answer 1

如果您希望此轮播填满屏幕，那么以下 CSS 调整应该可以实现：

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

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

}