autoHeight owl-carousel 2

Question

我希望物品占据容器高度的100％。 如果我给px中的元素赋予高度，它的工作完美，但我希望高度为100％。在桌面版中，如果我可以在px中放置一个值，但在移动设备中，我需要它占据100％的高度。

＆＃13;

＆＃13;

$('.owl-carousel').owlCarousel({
  items: 1,
  animateOut: 'fadeOut',
  loop: true,
  autoplay: true,
  autoplayTimeout: 4000,
  autoplayHoverPause: true,
  autoHeight:true
});

＆＃13;

.content {
  width: 400px;
  height: 300px;
  background: red;
  border: 2px solid;
  padding: 10px;
  overflod: hidden;
}

.item {
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.min.csss">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.min.css">

<div class="content">
  <div class="fadeOut owl-carousel owl-theme owl-loaded owl-drag">
    <div class="item"></div>
    <div class="item blue"></div>
    <div class="item yellow"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不是以像素为单位给出高度，而是可以在vh（View-port-height）中定义为：

$('.owl-carousel').owlCarousel({
  items: 1,
  animateOut: 'fadeOut',
  loop: true,
  autoplay: true,
  autoplayTimeout: 4000,
  autoplayHoverPause: true,
  autoHeight:true
});

.content {
  width: 400px;
  height: 100vh;
  background: red;
  border: 2px solid;
  padding: 10px;
  overflod: hidden;
}

.item {
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.min.csss">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.min.css">

<div class="content">
  <div class="fadeOut owl-carousel owl-theme owl-loaded owl-drag">
    <div class="item"></div>
    <div class="item blue"></div>
    <div class="item yellow"></div>
  </div>
</div>