Question

我正在制作一个旋转木马，并且有一些子元素位于相对父级内。我似乎无法让父母的高度达到100％的孩子，这样我就可以正确定位控件。在下面的代码中，我尝试将height: 100%和overflow: hidden应用于父级，但它似乎会折叠整个父级。为了响应目的，我试图避免给父母一个固定的高度。我有一个codepen来证明。

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">
      <div class="carousel-focus">
        <div class="carousel-focus-inner">
          <div class="carousel-focus-items">
            <div class="carousel-focus-item">
            <div class="embed-container">
              <iframe src="https://www.youtube.com/embed/hGQkp4K05kE" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
            <div class="carousel-focus-item active">
            <div class="embed-container">
              <iframe src="https://www.youtube.com/embed/EtNw4wLL5oQ" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
            <div class="carousel-focus-item">
              <div class="embed-container">
                <iframe src="https://www.youtube.com/embed/_bZj_yxfACw" frameborder="0" allowfullscreen></iframe>
              </div>
            </div>
          </div>
          <div class="carousel-focus-controls">
            <button class="btn btn-primary carousel-focus-control prev">
              <span class="fa fa-arrow-left"></span>
            </button>
            <button class="btn btn-primary carousel-focus-control next">
                <span class="fa fa-arrow-right"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SASS：

.carousel-focus {
  border: 1px solid;
  margin: 0;
  padding: 0;
  width: 100%;
  .carousel-focus-inner {
    height: 100%;
    position: relative;
    .carousel-focus-item {
      position: absolute;
      display: inline-block;
      width: 33%;
      iframe {
        border: 5px solid rgb(0, 123, 255);
        border-radius: 10px;
      }
      &:first-of-type {
        left: 0;
        transform: translate(0, 25%);
      }
      &:nth-of-type(2) {
        border-color: rgb(0, 105, 217);
        left: 50%;
        transform: translate(-50%, 0);
        width: 50%;
        z-index: 1;
      }
      &:nth-of-type(3) {
        right: 0;
        transform: translate(0, 25%);
      }
      &:nth-child(n+4) {
        display: none;
      }
    }
    .carousel-focus-controls {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 50%;
      transform: translate(-50%, 540%);
    }
  }
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 20px;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

jquery的：

$(document).on('click', '.carousel-focus-controls > .prev', function() {
  $(this).closest('.carousel-focus-inner').find('.carousel-focus-item ').first().hide().appendTo('.carousel-focus-items').show();
});

$('.carousel-focus-controls > .next').on('click', function() {
  $(this).closest('.carousel-focus-inner').find('.carousel-focus-item ').last().hide().prependTo('.carousel-focus-items').show();
});

有人认为这是重复的，但solution suggested使用了浮点数。馊主意！问题不是＆＃34;如何彻底改变你的位置绝对布局与古怪和布局破坏浮动＆＃34;。我在下面的答案中提供了一个简单的JS解决方案！

Answer 1

我找到了解决方案。我知道这是重复的，但提供的解决方案是可怕的。我不惜一切代价避免使用花车。所以这是一个简单的JS / jQuery解决方案：

function carouselHeight() {
  var maxHeight = $('.carousel-focus-item:nth-of-type(2)').outerHeight()
  $('.carousel-focus-inner').css('height', maxHeight);
}

$(document).ready(function() {
  carouselHeight();
})

$(window).resize(function () { 
  carouselHeight();
});

定位相对父级的绝对高度

1 个答案: