相对父级的位置绝对高度[重复]答案

【问题标题】：Position absolute height of relative parent [duplicate]相对父级的位置绝对高度[重复]
【发布时间】：2018-06-20 11:42:50
【问题描述】：

我正在处理一个轮播，并且有一些子元素在相对父级中绝对定位。我似乎无法让父母的高度成为孩子的 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>

萨斯：

.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 使用浮点数。馊主意！问题不是“如何用古怪和布局破坏浮动完全改变你的位置绝对布局”。我在下面的回答中提供了一个简单的 JS 解决方案！

【问题讨论】：

标签： css

【解决方案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();
});

【讨论】：