代码之家 › 专栏 › 技术社区 › Sandra Willford

相对父对象的位置绝对高度[重复]

css

Sandra Willford · 技术社区 · 7 年前

我正在制作一个旋转木马,其中有一些子元素位于相对父元素中的绝对位置。我似乎无法将父对象的高度完全设置为子对象的高度,以便正确定位控件。在下面的代码中,我尝试应用 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 使用浮点数。坏主意!问题不是“如何用古怪的、破坏布局的浮标完全改变你的位置绝对布局”。我在下面的回答中提供了一个简单的JS解决方案!

1 回复 | 直到 7 年前

Sandra Willford 7 年前

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