Как растянуть родительский div?

webstark · April 12, 2011

Имеется страничка:


<div id="cover">
  <div id="top">
    .........
  </div>
  <div id="bottom">
    ..........
  </div>
</div>

Для cover прописано в css background шириной в сайт и высотой в 1 пиксель с репитом y. Для top и bottom соответственно background верхней и нижней части сайта. Идея была в том, что бы когда контент больше высоты top, то он двигает bottom, а пустое место заполняется background'ом от cover. Но оно не работает, т.е. если я явно прописываю высоту какого-нибудь вложенного div'а, то всё ок, а если нет, то контент просто налезает на bottom и лезет дальше вниз.

Как сделать правильно?

Gaspode · April 12, 2011

Вы код приведите что ли. Или хоть ссылку на сайт дайте.

webstark · April 12, 2011

Недостаточно того, что я привёл?

Тогда вот чуть больше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>">
<div id="cover">
 <div id="covertop">
  <div id="maintop">
    .......................................
  </div>
  ....................................
  <div id="maincenter">
    <div id="centerleft">
      <?php print $sidebar_first; ?>
    </div>
    <div id="centercenter">
      <div id="cctop">
           <?php print $highlight; ?>

        <?php print $breadcrumb; ?>
        <?php if ($title): ?>
          <h1 class="title"><?php print $title; ?></h1>
        <?php endif; ?>
        <?php print $messages; ?>
        <?php if ($tabs): ?>
          <div class="tabs"><?php print $tabs; ?></div>
        <?php endif; ?>
        <?php print $help; ?>
        <?php print $content_top; ?>
        <?php print $content; ?>
    </div>
      <div id="ccmid">
      </div>
      <div id="ccbottom">
        <?php print $content_bottom; ?>

      </div>
    </div>
    <dir id="centerright">
      <?php print $sidebar_second; ?>
    </dir>
  </div>
 </div>
 <div id="coverbot">
  <div id="mainbottom">
        <?php print $main_center_bottom; ?>
    <?php print $footer; ?>
  </div>
 ..............................................
 </div>
</div>
</body>
</html>

Вот css (только кусок с background'ами):

#cover {
  background-image: url("../images/line.png");
  background-repeat: repeat-y;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 1191px;
}
#covertop {
  background-image: url("../images/top.png");
  background-repeat: no-repeat;
  height: 802px;
}
#coverbot {
  background-image: url("../images/bottom.png");
  background-repeat: no-repeat;
  height: 332px;
}

Gaspode · April 12, 2011

<dir id="centerright">
<?php print $sidebar_second; ?>
</dir>

Что за "дир", простите?

И дайте уже нормальный код страницы, а не кусок шаблона. За контент свой боитесь - вставьте другой. Из того, что вы объяснили, вот честно - ничорта не понятно.

Searcher · April 13, 2011

Вообще, верстка понятна, когда мы смотрим на то, что получает броузер, а не на серверный скрипт, да еще с вырезанными стилями.

Из всего, что вы дали можно сделать вывод, что какие-то ещё стили влияют на отображение вашей конструкции. Какой-то блок, возможно, является плавающим. Используйте Firebug для того, чтобы найти все взаимосвязи.

Ну и не думайте, что тут есть телепаты...

Выделите нужную вам конструкцию и смотрите, как она в чистом виде работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    #cover {
      background-color:gray;
      margin: 0 auto 0 auto;
      position: relative;
      width: 1191px;
    }
    #covertop {
      background-color:red;
    }
    #coverbot {
      background-color:blue;
    }
  </style>
</head>
<body>
  <div id="cover">
    <div id="covertop">
      .........
    </div>
      .........<br/>
      .........<br/>
      .........<br/>
    <div id="coverbot">
      ..........
    </div>
  </div>
</body>
</html>

webstark · April 13, 2011

Выложил сырую заготовку на тестовый хостинг. Вот страница с проблемой: http://spyselect.com/content/%D0%BC%D1%8B-%D0%BE%D1%82%D0%BA%D1%80%D1%8B%D0%BB%D0%B8%D1%81%D1%8C-0

А вообще вопрос: есть фоновая картинка, нужно что бы верх и низ были статичны, а середина тянулась. Как лучше реализовать?

psywalker · April 13, 2011

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

webstark · April 13, 2011

Ок, переверстаю используя float'ы.

psywalker · April 13, 2011

Ок, переверстаю используя float'ы.

Правильно, давно пора. :facepalmxd:

Sign In

Как растянуть родительский div?

Question

webstark

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

webstark

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

webstark

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

webstark

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information