CSS - позиция: абсолютная; - автоматическая высота

У меня проблема с некоторыми div

        

Внешний div имеет минимальную высоту, но внутренние divs - все разные высоты. Поскольку внутренние divs являются абсолютными, они не влияют на внешнюю высоту divs. Есть ли способ заставить эти внутренние divs влиять на высоту внешнего div?

Причина, по которой я стилю эти divs с положением: абсолютное - это то, что все они начинаются в верхней части контейнера div.

Ответы

Ответ 1

Насколько я знаю, нет никакого способа, чтобы абсолютно позиционированные дочерние элементы влияли на высоту их статически или относительно позиционированных родительских элементов, используя только CSS. Или:

  • Реорганизовать так, чтобы дочерние элементы оставались в потоке документа.
  • Используйте JavaScript при загрузке страницы, чтобы установить высоту родителя на высоту самого большого дочернего элемента

Эта проблема распространена в слайдах слайдов в режиме fade-in/fade-out и из того, что я видел либо: 1) нужно определить высоту родительского контейнера или 2) высота родительского контейнера устанавливается динамически для каждого слайдов.

Ответ 2

Недавно я столкнулся с этой проблемой при слайд-шоу перехода в/в CSS и решил решить его, предоставив первый дочерний элемент position: relative;, а остальные position: absolute; top:0; left: 0;, который гарантирует, что высота контейнеров совпадает с высотой первого элемента. Поскольку мое слайд-шоу перехода CSS использует свойство непрозрачности, размеры контейнера никогда не меняются во время слайд-шоу.

Увы, поскольку мне также нужно было предоставить резерв javascript для старых браузеров, мне все равно пришлось устанавливать высоту контейнера для этих браузеров (из-за jQuerys fadeIn/fadeOut на самом деле установка display: none;, я бы догадался).

Ответ 3

Я думаю, что вы должны позиционировать их относительно и просто изменить "вертикальное выравнивание" на "верх" в внутренних div. Тогда у вас не будет проблемы с приемом абс div.

Ответ 4

Вы можете просто плавать divs, если хотите, чтобы они находились на одной горизонтальной плоскости.

Ответ 5

Вот вам давно назревшее кросс-браузерное решение вашей проблемы. Больше не статично width, не более em hack.

<style>
  /* clearfix */
  .container:after {
    content: '';
    display: table;
    clear: left;
  }

  .page {
    float: left; /* display side-by-side */
    width: 100%; /* be as wide as parent */
    margin-right: -100%; /* take up no width */
  }
</style>

<div class="container">
  <div class="page"></div>
  <div class="page"></div>
</div>

После долгого поиска решения этой проблемы я смущен, чтобы понять, насколько это просто. Разумеется, элементы .page не являются абсолютно позиционируемыми. Тем не менее, все те же цели могут быть достигнуты с помощью этого метода, практически без боли или жертвы.

Вот демо: https://jsfiddle.net/eqe2muhv/

Это также работает для встроенных блоков, конечно. Хотя вам может потребоваться установить font-size или letter-spacing контейнера в 0. Я бы также рекомендовал использовать vertical-align: top в .page, чтобы имитировать регулярный элемент блока.

Вот демо: https://jsfiddle.net/dzouxurs/8/

Ответ 6

Проверьте display: inline-block на элементе, который нуждается в автоматической высоте.