Контейнер DIV не расширяется, чтобы включать DIV с абсолютным позиционированием

Question

Я думаю, что есть простое решение, но оно ускользает от меня.Если вы посмотрите на эту страницу , вы увидите, что только заголовок имеет серый фон.Серый фон задается #container DIV, который я хотел бы растянуть на всю высоту страницы:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
}

На данный момент он распространяется только на верхний раздел страницы, аСодержание ниже не содержится в нем.Я предполагаю, что это потому, что основное содержимое в #content DIV имеет абсолютное позиционирование, которое мне нужно для того, чтобы иметь возможность выполнять анимацию при позиционировании этого div (вы можете видеть это, когда наводите курсор мыши на изображение навигационной панели):

#content {
    font-family: Lucida sans unicode !important;
    color: #CECBBB;
    text-align: justify;
    position: absolute;
    top: 210px;
    padding: 20px 40px;
}

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

Я быблагодарен за помощь.

Спасибо,

Ник

Answer 1

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

ИМХО, у вас есть много решений:

1. Использовать плавающий макет вместо макета с абсолютным позиционированием
2. Жесткий код высоты container элемента
3. Используйте JavaScript, чтобы всегда обновлять высоту элемента container.

Answer 2

Если вам нужно, чтобы #content был абсолютно позиционирован (как вы указали в своем вопросе), тогда лучший способ получить фон, который вы хотите, - это либо поставить background-color: #292929 на #content (вам, вероятно, понадобится). отрегулировать положение и отступы, чтобы исключить черный цвет).

Однако, если анимация - это подменю в верхней части, которое открывается при наведении, тогда я предлагаю установить для меню и div содержимого значение position: relative, и вместо анимирования позиции top #content (как кажется, что ваш сценарий выполняется), анимируйте height меню (по умолчанию оно равно нулю и анимируется до чего-то вроде 45px high [это то, что firebug показывал, что высота открыта)).

Answer 3

Расширяем немного здесь ответ Сесила.

Вместо этого можно расположить div с полями, чтобы убедиться, что родитель растет с потомком.

Se это скрипка

https://jsfiddle.net/944oahmy/10/

Где используется следующий css

#parent {
  border: 1px solid blue;
  margin-top: -5px;
  margin-left: 10px;
  display: inline-block;
}

#child {
  border: 1px solid red;
  margin-top: 75px;
  margin-left: 150px;
  width: 500px;
}

Answer 4

#content {
    color: #CECBBB;
    font-family: Lucida sans unicode !important;
    margin-top: 40px;
    padding: 20px 40px;
    text-align: justify;
}

добавьте поле margin-top и удалите абсолютную позицию.