javascript - React 响应式转盘高度未正确调整

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;

}

Answer 2

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

Answer 3

更改 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;
}