CSS берет высоту абсолютно позиционированного ребенка - PullRequest
Новая
       15

CSS берет высоту абсолютно позиционированного ребенка

2 голосов
/ 30 июля 2011

У меня есть контейнер, для которого установлено значение max-width:780px, а высота не объявлена. Внутри контейнера есть слайд-шоу с изображениями. Все на странице отзывчиво, поэтому по мере уменьшения ширины изображение (ширина которого установлена ​​на 100%) корректирует контейнер высоты.

Слайд-шоу изменяет изображения на display:static; и position:absolute;, которые больше не "удерживают открытыми" контейнер, поскольку он не рассматривается как содержимое контейнера

Есть ли какое-нибудь креативное решение для определения высоты дочернего элемента, который абсолютно позиционирован?

В приведенном ниже примере НЕТ высоты, объявленной в основном контейнере. Ничто не удерживает его открытым. http://dhut.ch/test/santos/

Спасибо!

Ответы [ 4 ]

5 голосов
/ 10 августа 2011

Изображения имеют одинаковые размеры? Если да, вы можете использовать процент padding-top для элемента, который содержит изображения.

Итак, если все ваши изображения, скажем, 760 пикселей в ширину и 500 пикселей в высоту, это 500/760 = .65789

Что в процентах будет переводиться в нечто вроде: 

#main { 
    position: relative; 
    max-width: 760px;
    padding-top: 65.789%;  
}

Причина, по которой это работает, заключается в том, что при padding, если он установлен в процентах, он рассчитывается как процент от ширины . При уменьшении ширины элемента высота будет пропорционально уменьшаться, и поле останется в том же соотношении ширины и высоты. Изображения, расположенные абсолютно, не будут увеличивать высоту окна.

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

2 голосов
/ 20 июня 2013

У меня недавно была похожая проблема с изображением, которое мне было необходимо для абсолютного положения вверху шаблонной страницы Zurb Foundation, чтобы вытащить его из потока и сбросить его размеры (Изображение должно было растягиваться до краев обертки,вместо этого должен быть заключен в родительский .row padding).Однако, конечно, это означало, что все чувствительные к жидкости элементы под ним выскочили прямо поверх изображения.Установка поля наверху или расположение элементов, расположенных ниже, означало жесткое верхнее пространство, которое не менялось по ширине браузера.

Чтобы обойти это, я поместил дубликат изображения сразу после абсолютногоПозиционировать изображение и установить его visibility: hidden; Мне пришлось добавить немного дополнительного поля снизу, чтобы компенсировать разницу в высоте, но в результате все на странице перетекает точно в высоту используемого изображения.

Я также использовал трюк с отступами, описанный выше необъяснимым Бакном, и это тоже отличный трюк.Это займет немного математики, но я проголосовал за этот ответ.Отличное решение.

1 голос
/ 30 июля 2011

Я думаю, тебе лучше изменить свой подход.Для ползунков рекомендуется использовать плавающие дочерние элементы контейнера, а также использовать один из известных методов для предотвращения коллапса родителей.Итак, я предлагаю вам удалить правило CSS position: absolute из изображений и поместить их в ваш <div id='main'>, а затем использовать любой из этих методов, чтобы заставить его охватывать его дочерние элементы:

  1. div#main {overflow: hidden;}
  2. div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
  3. Добавьте <div style='clear: both;'> в конец основного контейнера div.
0 голосов
/ 30 июля 2011

Удалить абсолютную позицию.Я бы также избегал встроенного стиля.

...