CSS: установите относительный позиционированный родительский элемент к высоте абсолютного позиционированного дочернего элемента

Я пытаюсь создать простое слайд-шоу. Пока что основная разметка выглядит так:

<h1>My Slideshow</h1>

<p>This paragraph behaves as expected.</p>

<div class="slide-container">
  <div class="slide">
    <h2>First Slide</h2>
    <p>Some stuff on this slide…</p>
  </div>

  <div class="slide">
    <h2>Second Slide</h2>
    <p>And some more stuff here…</p>
  </div>
</div>

<p>This paragraph will disappear beneath the stacked images.</p>

Это соответствующий CSS:

.slide-container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;

  /* just for the looks */
  width: 20em;
  padding: 0 1em;
  border: 1px solid steelblue;
  background: white;
}

Проблема заключается в том, что .slide-container не соответствует высоте его дочернего элемента (или дочерних элементов) .slide (см. снимок экрана).

Я знаю, что могу установить высоту .slide-container вручную, но я хочу поместить это в жидкую сетку, где высота является переменной. Есть ли способ достичь этого?

Ответ 1

Абсолютно позиционированные элементы логически связаны с родителями, но не "физически". Они не являются частью макета, поэтому родительский элемент не может видеть, насколько они велики. Вам нужно самому закодировать размер или обнюхать его с помощью JavaScript и установить его во время выполнения.

Ответ 2

Вы можете использовать это с помощью jquery:

    function sliderheight(){
        divHeight = $('.slide').height();
        $('.slide-container').css({'height' : divHeight});
    }
    sliderheight();

Это приведет к изменению размера div-контейнера "slide-container" на ту же высоту, что и div "slide".

Вы можете сделать это отзывчивым, вызвав функцию при запуске события "изменить размер":

   $(window).resize(sliderheight);

Надеюсь, что это поможет.

Ответ 3

Идеальный способ сделать это - установить относительные размеры родителя, то есть высоту и ширину, чтобы соответствовать абсолютным детям.

http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

Этот парень написал достаточно, чтобы понять основы позиционирования css. Фактически относительный родитель используется для логического определения всего его абсолютного ребенка. Но он не разделяет физическое положение, в результате он не растягивается, чтобы покрыть относительных детей.