Position absolute height of relative parent

Question

I am working on a carousel and have some child elements that are positioned absolute within a relative parent. I can't seem to get the height of the parent to be 100% of the children so that I can position the controls properly. In the code below I tried to apply height: 100% and overflow: hidden to the parent, but it seems to collapse the whole parent. For responsive purposes I am trying to avoid giving the parent a fixed height. I have a codepen up to demonstrate.

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

It was suggested this is a duplicate, however the solution suggested uses floats. Bad idea! The question was not "How to completely change your position absolute layout with quirky and layout busting floats". I provided a simple JS solution in my answer below!

score 1 · Accepted Answer · answered Jan 11 '18 at 08:07

I found a solution for this. I know it was suggested this was a duplicate, but the solution provided is HORRIBLE. I avoid using floats at all costs. So here is a simple JS/jQuery solution:

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

Position absolute height of relative parent

1 Answers1