Высота абсолютного позиционирования div игнорируется - PullRequest
Новая
       1

Высота абсолютного позиционирования div игнорируется

2 голосов
/ 12 февраля 2012

У меня есть такая простая HTML-структура: 

<div id="mainbody">
  <div id="main">
  ...
  </div>
  <div id="left">
  ...
  </div>
</div>
<div id="footer">
...
</div>

У div "mainbody" есть позиция: относительная.Элемент div "left" имеет абсолютную позицию в левой части страницы и динамическую высоту.Div "main" плавает влево справа от div "left".

CSS: 

#mainbody {
    position:relative;
}
#left {
    position:absolute;
    width:250px;
}
#main {
    float: left;
    margin-left: 260px;
    width:80%;
}

ПРОБЛЕМА: Высота div "left" игнорируется, а div "footer"начинается там, где заканчивается div "main", хотя div "left" имеет большую высоту, чем div "main".

Ответы [ 2 ]

3 голосов
/ 12 февраля 2012

То, что вы ищете, это clearfix , чтобы ваши элементы загружались правильно. См. связанный вопрос SO "Какой метод 'clearfix' является лучшим?" для многочисленных возможных исправлений.

Причина, по которой элемент footer размещается рядом с элементом main, заключается в том, что абсолютно позиционированные элементы удаляются из потока страниц. В результате более поздние элементы обрабатывают абсолютно позиционированный элемент, как если бы его не было вообще. С помощью исправления эта проблема решена.

2 голосов
/ 12 февраля 2012

Вам нужно добавить очистку после плавающих элементов, если вы не хотите, чтобы на следующие элементы влияли.

Это может быть достигнуто двумя способами:

  1. Добавить css clear: both или clear: right для следующего элемента. (например, после div # left. Или до # footer.

  2. Добавление переполнения: автоматически для div # mainbody

Кстати, если вы хотите получить более конкретные или точные ответы, я предлагаю вам включить и ваш HTML, и CSS.

...