Question

我的html模板中有以下代码段，其中我使用了来自实现CSS的轮播。转盘被卡住，其默认高度为400px。我试图通过CSS来增加它的高度：

.carousel{
        min-height: 550px;
 }

上面的代码确实可以增加滑块的高度。但是，当我将屏幕分辨率更改为“移动视图”时，轮播下方会出现一些多余的空白，从而推动下面的内容。进一步将屏幕分辨率更改回桌面模式时，滑块高度达到760px。

如果有人能提出解决此问题的方法，我将非常感激。

$('.carousel').carousel({
  fullWidth: true
});

.carousel{
min-height:550px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="carousel carousel-slider center" data-indicators="true">

  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?food" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?cat" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?corgi" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?retriver" alt="">
  </div>
</div>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae explicabo odit inventore placeat, laboriosam qui expedita quibusdam, voluptas quia numquam provident nam rem quam hic eum repudiandae quisquam quod totam autem consequatur officiis possimus quasi iusto aut. Dignissimos eos recusandae veniam eius cupiditate consectetur suscipit explicabo tenetur tempore quod ea, at consequuntur sit laudantium qui minus laborum laboriosam quo in odit illum veritatis ducimus. Reiciendis modi quos, laborum aliquam autem quia soluta molestiae! Unde vero labore fuga numquam incidunt voluptates mollitia sit dolores possimus dolorum. Iusto aspernatur odit sint dolore. Magnam consequuntur perferendis expedita? Quidem inventore officiis alias, amet ex porro voluptatem sapiente quasi, sed vitae, aspernatur, odio nulla totam corrupti. Alias repellat, eligendi inventore rem, omnis laudantium nobis qui ab esse corrupti quibusdam ex porro debitis? Optio a modi quas esse neque autem natus consectetur, mollitia nostrum ut vel velit at ex, ipsam necessitatibus? Incidunt deserunt expedita commodi pariatur adipisci recusandae iusto, odio impedit magnam ipsum, ut earum quis a veritatis facere blanditiis magni est ullam unde. Quibusdam similique porro quae dolores quidem ipsa distinctio incidunt est enim, optio laboriosam maiores non itaque praesentium hic nam consequuntur a iste quas velit deserunt eum, possimus facere quasi. Soluta, incidunt cum.   

</div>

Answer 1

您需要将min-height：auto设置为.carousel类：

$('.carousel').carousel({
  fullWidth: true
});

.carousel {
  min-height: 550px
}

@media only screen and (max-width: 991px) {
  .carousel {
    min-height: auto
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div class="carousel carousel-slider center" data-indicators="true">

  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?food" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?cat" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?corgi" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?retriver" alt="">
  </div>
</div>
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae explicabo odit inventore placeat, laboriosam qui expedita quibusdam, voluptas quia numquam provident nam rem quam hic eum repudiandae quisquam quod totam autem consequatur officiis possimus
  quasi iusto aut. Dignissimos eos recusandae veniam eius cupiditate consectetur suscipit explicabo tenetur tempore quod ea, at consequuntur sit laudantium qui minus laborum laboriosam quo in odit illum veritatis ducimus. Reiciendis modi quos, laborum
  aliquam autem quia soluta molestiae! Unde vero labore fuga numquam incidunt voluptates mollitia sit dolores possimus dolorum. Iusto aspernatur odit sint dolore. Magnam consequuntur perferendis expedita? Quidem inventore officiis alias, amet ex porro
  voluptatem sapiente quasi, sed vitae, aspernatur, odio nulla totam corrupti. Alias repellat, eligendi inventore rem, omnis laudantium nobis qui ab esse corrupti quibusdam ex porro debitis? Optio a modi quas esse neque autem natus consectetur, mollitia
  nostrum ut vel velit at ex, ipsam necessitatibus? Incidunt deserunt expedita commodi pariatur adipisci recusandae iusto, odio impedit magnam ipsum, ut earum quis a veritatis facere blanditiis magni est ullam unde. Quibusdam similique porro quae dolores
  quidem ipsa distinctio incidunt est enim, optio laboriosam maiores non itaque praesentium hic nam consequuntur a iste quas velit deserunt eum, possimus facere quasi. Soluta, incidunt cum.

</div>

在实现CSS中增加转盘高度

1 个答案: