javascript - slick carousel 在服务器上有 1px 高度，本地环境 100%

Question

我正在使用光滑的旋转木马。我希望 background-url 的高度为 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);
}

我不知道哪里出了问题。

你能帮帮我吗？谢谢!

Answer 1

问题似乎是因为您的 section 或 .carousel-container 都没有 100% 高度，您生成的任何元素也没有光滑的旋转木马。

简单的解决方法就是在 .fill 元素上使用视口(viewport)单位而不是百分比。

尝试进行以下更改:

.fill {
  height: 100vh;
}

vh 单元在所有浏览器中都得到了很好的支持。 Can I use

这可能不一定是实现您想要实现的目标的最佳方式，而只是一个建议。