Элемент абсолютной позиции CSS расширяет фон

У меня есть div с абсолютной позицией, который перекрывает фон контейнеров из-за большей высоты. Этот div делит контейнер с body div, который благополучно сидит слева от него.

Есть ли способ расширить контейнер до высоты абсолютно позиционированного div, а не содержимого тела?

Или я должен просто разместить div рядом и поставить <div style="clear: both"></div> внизу двух? Похоже на грязный хак, чтобы расширить контейнер:/

РЕДАКТИРОВАТЬ: комментарии, похоже, не любят структуру кода. Так что я отредактирую его и здесь.

Макет:

<div id="content">
   <div class="container">
      <div id="header"></div>
      <div id="main">
         <div id="column-1"></div>
         <div id="column-2"></div>
      </div>
   </div>
</div>

#content имеет повторяющийся фон, а #container устанавливает фиксированную ширину страницы. #header отвечает за ссылки, а #main содержит два столбца с основным содержанием страницы. Я не могу заставить эти два столбца располагаться рядом друг с другом (плавать/абсолютно), в то время как фон #content's повторяется под ними


css background absolute position extends
person Anon    schedule 30.10.2009    source источник
comment
Дополнительные фрагменты кода будут полезны :)   -  person o.k.w    schedule 30.10.2009

Ответы (1)


arrow_upward
2
arrow_downward

С этим макетом:

<div id="content">
  <div class="container">
    <div id="header"></div>
    <div id="main">
      <div id="column-1"></div>
      <div id="column-2"></div>
    </div>
  </div>
</div>

ваш базовый CSS должен выглядеть примерно так:

html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }

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

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

Абсолютное позиционирование имеет место быть, но в 9 случаях из 10 я получаю лучшие результаты с макетом на основе плавающей точки. Но я не могу сказать больше без дополнительной информации.

person cletus    schedule 30.10.2009
comment
Макет: ‹div id=content›‹div class=container›‹div id=header›‹/div›‹div id=main›‹div id=column-1›‹/div›‹div id=column- 2›‹/div›‹/div›‹/div›‹/div› #content имеет повторяющийся фон, а #container устанавливает фиксированную ширину страницы. #header предназначен для ссылок, а #main содержит два столбца с основным содержимым страницы. Я не могу заставить эти два столбца располагаться рядом друг с другом (плавать/абсолютно), в то время как фон #content повторяется под ними. - person Anon; 30.10.2009
comment
Клетус прав; в макете с плавающей запятой будут работать плавающие два столбца. Внутренние столбцы не будут перекрывать контейнер, и вам не понадобится старый хак clearfix. Я тоже ненавижу этот хак! - person tahdhaze09; 30.10.2009