Studio AD : Как растянуть див на высоту клиентской части окна браузера

Страница 1 из 1
1

Как растянуть див на высоту клиентской части окна браузера (Независимо от контента и под разные разрешения экрана)

Как растянуть див на высоту клиентской части окна браузера

Anopsa

Дата: Суббота, 19.09.2009, 16:58 | Сообщение # 1

Группа: Удаленные

Здравствуйте!
Кто знает, как растянуть див на всю высоту клиентской части окна браузера НЕЗАВИСИМО ОТ КОНТЕНТА и ПОД ТО РАЗРЕШЕНИЕ ЭКРАНА, которое установлено на машине пользователя.
То есть, при помощи JavaScript я узнаю размеры (Например: Длина = 1244px Высота = 631px). А как прописать эти переменные для div в значение min-height. Как задать высоту блока, если она всегда будет разная.

UnderShot

Дата: Суббота, 19.09.2009, 19:28 | Сообщение # 2

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Замечания: 0%

Создаешь div, и заполняешь его своим содержимим.
HTML:

Code

<div id='wrap'>Содержимое</div>

CSS:

Code

#wrapp{width:ШИРИНА;min-height:100%;height:auto !important;height:100%}

Попробуй это, мне помогает

-------------------------------------

Другой способ:

HTML:

Code

<div id='wrap'>Содержимое</div>

CSS:

Code

html,body{overflow:hidden;width:100%;height:100%;}
#wrapp{width:100%;height:100%;margin-bottom:-1000em;padding-bottom:1000em}

Очень важная тема!
Filmzona — онлайн фильмы.

Сообщение отредактировал UnderShot - Суббота, 19.09.2009, 19:34

Aleko

Дата: Воскресенье, 20.09.2009, 00:13 | Сообщение # 3

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

Quote (dancelot)

min-height:100%;height:auto !important;height:100%

Абсолютно правильно. Подробное цетрирование и 100 растяжка описаны у меня в этой статье: http://studioad.ru/blog/2009-02-20-42

Бесплатные обои.

SE7EN

Дата: Воскресенье, 29.11.2009, 18:27 | Сообщение # 4

молчун

Группа: Проверенные

Пользователь №: 532

Сообщений: 20

Карма: 0

Замечания: 0%

попробовал ваши советы ничего не получается.

в хтмл вот такая конструкция (часть кода):

Code

<table border="0" width="100%" cellpadding="0" cellspacing="0">
     <tr valign="top">
        <td id="leftcol">{%BLOCKS left%}</td>
        <td id="centercol">
   {%BLOCKS message%}
   {%BLOCKS center%}
   {%MODULE%}
          {%BLOCKS down%}
        </td>
        <td id="rightcol">{%BLOCKS right%}</td>
    </tr>
</table>

в а CSS вот так:

Code

/*ЛЕВАЯ КОЛОНКА*/
#leftcol{
height:100%;
margin-top: 0px;
border-right: 1px dashed #515b65;
float:left;
}

/*ПРАВАЯ КОЛОНКА*/
#rightcol{
margin-top: 0px;
border-left: 1px dashed #515b65;
float:right;
}

/*ЦЕНТРАЛЬНАЯ КОЛОНКА*/
#centercol{
padding-left:5px;
padding-right:5px;
padding-top:1px;
margin-top:0px;
margin-left:202px;
margin-right:205px;
}

UnderShot

Дата: Воскресенье, 29.11.2009, 19:05 | Сообщение # 5

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Замечания: 0%

SE7EN, потому-что все эти методы для DIV'а. Решение с таблицами гараздо легче, просто добавляете 100%-высоту самой таблице:

Code

<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
     <tr valign="top">
        <td id="leftcol">{%BLOCKS left%}</td>
        <td id="centercol">
   {%BLOCKS message%}
   {%BLOCKS center%}
   {%MODULE%}
          {%BLOCKS down%}
        </td>
       <td id="rightcol">{%BLOCKS right%}</td>
    </tr>
</table>

Очень важная тема!
Filmzona — онлайн фильмы.

SE7EN

Дата: Воскресенье, 29.11.2009, 21:35 | Сообщение # 6

молчун

Группа: Проверенные

Пользователь №: 532

Сообщений: 20

Карма: 0

Замечания: 0%

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

Прикрепления: 4236740.jpg (156.8 Kb)

UnderShot

Дата: Понедельник, 30.11.2009, 11:34 | Сообщение # 7

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Замечания: 0%

SE7EN, http://css-school.ru/css_ver....a..html

Очень важная тема!
Filmzona — онлайн фильмы.

SE7EN

Дата: Понедельник, 30.11.2009, 17:40 | Сообщение # 8

молчун

Группа: Проверенные

Пользователь №: 532

Сообщений: 20

Карма: 0

Замечания: 0%

UnderShot, ОГРОМНЕЙШЕЕ СПАИБО, помогло, но вот теперь буду бороться с крссбраузенностью, Опера, Фаерфокс, Хром, Сафари, Интернет ехполрер 8 отображают сайт чики чики, а вот Макстон косячит малость, ноя думаю это надо проверить позиционирование.

СПАСИБО ЕЩЁ РАЗ,

Aleko

Дата: Понедельник, 30.11.2009, 17:45 | Сообщение # 9

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

SE7EN, макстоном вообще никогда не проверяю. Им пользуются даже реже чем експлорером.

Бесплатные обои.

SE7EN

Дата: Понедельник, 30.11.2009, 19:54 | Сообщение # 10

молчун

Группа: Проверенные

Пользователь №: 532

Сообщений: 20

Карма: 0

Замечания: 0%

Aleko, ну это ты, а я кучу народу знаю которые этой хренью пользуются. Я сам фанат Оперы, супруга сидит на Фаерфоксе, а больнинство знакомых IE. Так что сам понимаешь.

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

UnderShot

Дата: Понедельник, 30.11.2009, 20:14 | Сообщение # 11

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Замечания: 0%

SE7EN, да забейте на этот макстон. Он хуже IE, зря силы потратите на исправление багов в нем, своим знакомым лучше порекомендуйте новые браузеры, такие как Опера или Мозилла

Очень важная тема!
Filmzona — онлайн фильмы.

UnderShot

Дата: Понедельник, 30.11.2009, 20:16 | Сообщение # 12

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Замечания: 0%

Quote (SE7EN)

ОГРОМНЕЙШЕЕ СПАИБО

В благодарность можно пополнить мне карму новым плюсиком ^^
Под моей аватаркой есть "Карма", там ставить плюсы ^_^

Очень важная тема!
Filmzona — онлайн фильмы.

Страница 1 из 1
1