родительский div расширяется до дочернего div - PullRequest
Новая
       42

родительский div расширяется до дочернего div

0 голосов
/ 30 марта 2011

Мне нужно делить: 

<div id="outerContent">
  <div id="innerContent">
  </div>
</div>

Положение innerContents является абсолютным (мне это нужно для JavaScript-анимации).Как получить externalContent для расширения до высоты innerContents, как если бы innerContent не было установлено в position: absolute?

Ответы [ 2 ]

3 голосов
/ 30 марта 2011

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

Вы можете использовать JavaScript для синхронизации их ширины. Вот так: 

$('#outerContent').width($('#innerContent').width());

И то же самое с высотой.

А есть другой вариант. 

<div id="outerContent">
  <div id="innerContent"></div>
  <div id="innerContentDouble" style="visibility:hidden"></div>
</div>

innerContentDouble должно иметь то же содержимое, что и innerContent, но оно не должно быть position: absolute. Таким образом, родительский div будет расширяться, но из-за «visibility: hidden» содержимое «doubled» div не будет отображаться. Но это не очень хорошая практика:)

0 голосов
/ 31 марта 2011

Две вещи:

1) Вы должны быть в состоянии отодвинуть innerdiv без необходимости position:absolute;, position:relative; должно быть достаточно. Преимущество в том, что он по-прежнему считается находящимся в потоке рендеринга, как его назвал aveic.

См. мой пример jsfiddle

2) если вы хотите использовать absolute, вы можете убедиться, что он ничего не испортил, только включив его с JS, так как вы все равно используете JS для выполнения анимации. Поэтому в JS просто скажите $('#innerDiv').css({position: absolute});, и вы все равно не откажетесь от людей без включенного JS.

...