VPF::DIV внутри DIV'а нехочет растягиваться по высоте

Forsaken

Дата 12.8.2009, 09:23 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3

Здравствуйте!
Не могу ни как растянуть внутренний див (page_shr) на 100% по высоте. Подскажите пожалуйста, как это можно сделать (если можно вообще) и от чего это происходит? Я уже в отчаянии..(

Вот код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
   <head>
      <title>Site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style>
        html, body {
           height: 100%;
           margin: 0px; padding: 0px;
           font: 12px/18px arial, helvetica, sans-serif;
           background: #6A6B6E url("backg.png") repeat-x 0px 0px;
        }
        div#page {
          height: 100%;
        }
        body > div#page {
          height:auto;
          min-height:100%;
        }

        div#page {
          width: 844px;
          margin: 0px auto;
          background: #6A6B6E url("base_shl.png") repeat-y 0px 0px;
        }
        div#page_shr {
          width: 100%; height: auto; min-height:100%;  /* НИ КАК НЕ РАССТЯГИВАЕТСЯ ПО ВЫСОТЕ (((( */
          margin: 0;
          background: red;
        }
      </style>
   </head>

   <body>
   <div id="page"><div id="page_shr">
   </div></div><!-- page -->
   </body>
</html>

Хочу сделать чтобы page_shr занимал все пространство дива page а невыходит.. Занимает только по ширене.
Помогите пожалуйста

Это сообщение отредактировал(а) Forsaken - 12.8.2009, 09:36

skyboy

Дата 12.8.2009, 09:35 (ссылка)

(голосов:1)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

для #page убери height: auto;
а то у тебя #page должно растягиваться по размеру содержимого(height: auto;), а содержимое(div#page_shr) - по размеру родителя. в итоге - оба нулевого размера.
а потом уже накладываются ограничения min-height и родитель(#page) растягивается по своему родителю, а #page_shr - нет(видимо, оттого, что рассчет начинается с детей и до родителей: когда для #page_shr проверяется min-height, то у #page высота ещё считается нулевой)

Forsaken

Дата 12.8.2009, 09:53 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3

skyboy,
Спасибо большое!
Вот работающий вариант с подвалом и более понятный:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
   <head>
      <title>Site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style>
        html, body {
           height: 100%;
           margin: 0px; padding: 0px;
           font: 12px/18px "lucida grande", arial, helvetica, sans-serif;
           background: #6A6B6E url("backg.png") repeat-x 0px 0px;
        }
        div#page {
          height: 100%;
        }
        body > div#page {
          min-height:100%;
        }

        div#page {
          width: 844px;
          margin: 0px auto;
          background: white url("base_shl.png") repeat-y 0px 0px;
        }
        div#page_shr {
          width: 100%; height: 100%; min-height:100%; 
          margin: 0;
          background: red;
        }
    div#enddoc {
          height: 100px;clear:both;
    }
        div#footer {
          height: 100px; margin-top:-100px; position:relative;
          background-color: black;
        }

      </style>
   </head>

   <body>
   <div id="page"><div id="page_shr">
    <div id="enddoc"></div>
   </div></div><!-- page -->
   <div id="footer">footer</div>
   </body>
</html>

skyboy,
И еще большое спасибо за разъяснения!

Это сообщение отредактировал(а) Forsaken - 12.8.2009, 09:54

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »