Css 相对父对象的位置绝对高度

我正在一个旋转木马上工作，并且有一些子元素被绝对定位在相对父元素中。我似乎无法将父对象的高度设置为子对象的100%，以便正确定位控件。在下面的代码中，我尝试将

height:100%

和

overflow:hidden

应用于父级，但它似乎会使整个父级崩溃。出于响应的目的，我尽量避免给父母一个固定的高度。我有一个问题要证明

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>

.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%;
    }
}

$(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();
});

jquery:

<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>

.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%;
    }
}

$(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();
});

---

有人建议这是一个重复，但使用浮动。坏主意！问题不是“如何用古怪的、破坏布局的浮动完全改变你的位置绝对布局”。我在下面的回答中提供了一个简单的JS解决方案

我找到了解决办法。我知道有人建议这是一个重复，但提供的解决方案是可怕的。我不惜一切代价避免使用浮动。下面是一个简单的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();
});