CSS абсолютно позиционный элемент расширяет фон - PullRequest
Новая
       9

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

0 голосов
/ 30 октября 2009

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

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

Или я должен просто плавать divs бок о бок и бросить <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 повторяется ниже них

1 Ответ

2 голосов
/ 30 октября 2009

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

<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 я получаю лучшие результаты с помощью плавающего макета. Но я не могу сказать больше без дополнительной информации.

...