javascript - 光滑的轮播在服务器上的高度为1px，本地环境为100％

我正在使用圆滑的传送带。我希望背景网址的高度为100％

这是我的旋转木马
http://jsfiddle.net/84c8gvkt/3/

HTML：

<section>
<div class="carousel-container">
    <div class="fill" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');">&nbsp;</div>
    <div class="slide" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');">&nbsp;</div>
</div>

JS：

    $('.carousel-container').slick({
    dots: true,
    infinite: true,
    speed: 3000,
    fade: true,
    cssEase: 'linear',
    autoplay: false,
    pauseOnHover: true,

});

的CSS

html, body {
width: 100%;
height: 100%;
}

.fill {
    padding: 0px;
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
}
.fill:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

我不知道哪里出了问题。

你能帮助我吗？谢谢！

最佳答案

问题似乎是由于您的section或.carousel-container都没有100％的高度，或者圆滑的轮播所生成的任何元素都没有。

容易解决的只是使用视口单位而不是.fill元素上的百分比。

尝试进行以下更改：

.fill {
  height: 100vh;
}

所有浏览器都很好地支持vh单元。 Can I use

对于您要实现的目标，这不一定是最佳方法，但这只是一个建议。