在 div 中包装滑块降低高度答案

【问题标题】：Wrapping slider in div decreasing height在 div 中包装滑块降低高度
【发布时间】：2014-12-18 04:56:22
【问题描述】：

我正在使用这个滑块。这是演示链接

http://www.idangero.us/sliders/swiper/demos/main-demos/17-responsive.html

但我想将此滑块包装在一个 div 中，但是当我这样做时，它会将高度从 100% 降低到 125px

原代码

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <div class="title">Slide 1</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 3</div>
      </div>
      <div class="swiper-slide green-slide">
        <div class="title">Slide 4</div>
      </div>
      <div class="swiper-slide pink-slide">
        <div class="title">Slide 5</div>
      </div>
      <div class="swiper-slide red-slide">
        <div class="title">Slide 6</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 7</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 8</div>
      </div>
    </div>
    <div class="pagination"></div>
  </div>

我的代码：

<div class="bodycontent">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <div class="title">Slide 1</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 3</div>
      </div>
      <div class="swiper-slide green-slide">
        <div class="title">Slide 4</div>
      </div>
      <div class="swiper-slide pink-slide">
        <div class="title">Slide 5</div>
      </div>
      <div class="swiper-slide red-slide">
        <div class="title">Slide 6</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 7</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 8</div>
      </div>
    </div>
    <div class="pagination"></div>
  </div>
</div>

【问题讨论】：

如果它的高度设置为100%，则需要设置要添加的父元素的高度，否则不知道100%是什么意思。添加.bodycontent{height:100%;} 看看是否可以解决问题。
非常感谢你解决了我的问题..它成功了..
只需将问题标记为已回答——“接受”以下 Brewal 提供的答案。 :)

标签： javascript jquery html css height

【解决方案1】：

只需添加这个 CSS：

.bodycontent {
    height: 100%
}

【讨论】：

打败我——布鲁瓦尔说的。