VPF::div по высоте экрана - Форум программистов

NLspieler

Дата 31.12.2010, 18:22 (ссылка)

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

Загрузка ...

Опытный

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

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

Привет всем,
у меня один очень важный вопрос.

Есть div, назовем его "main".
Необходимо сделать так, что бы его высота была как минимум во все доступное пространство браузера.

В результате не долгих экспериментов, удалось найти решение при помощи javascript:

Код


<script type="text/javascript">        
  function onl() 
  { 
    document.getElementById('main').style.minHeight = document.documentElement.clientHeight + "px"  ; 
  } 
  window.onload = onl;
</script>

Но у такого способа есть масса недостатков:
не работает, если отключены скрипты
страница не изменяется, если менять размер окна браузера

Сколько не пытался сделать при помощи css, ничего не получилось.
Может быть вы знаете?

Это сообщение отредактировал(а) NLspieler - 31.12.2010, 18:23

Mavrun

Дата 31.12.2010, 18:25 (ссылка)

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

Загрузка ...

Бывалый

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

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

я бы отделил отдельно футер, прижал бы его к низу экрана - всё на цсс, не требует хаков и всегда/везде работает.

NLspieler

Дата 31.12.2010, 18:33 (ссылка)

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

Загрузка ...

Опытный

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

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

Проблема не столько в футере, сколько в том, что у этого дива слева и справа должна быть тень

SelenIT

Дата 31.12.2010, 18:53 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Если ширина дива фиксированная, то

Код


html, body { height: 100%; }

#height100 {
   min-height: 100%;
   _height: 100%; /* или любым другим способом задать height:100% только для IE */
  background: url(одна_широкая_картинка_с_кусочками_правой_и_левой_тени.png) 50% 0 repeat-y;
}

С резиной чуть сложнее, но с доп. контейнером должно решаться...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

KatyaXml

Дата 1.1.2011, 10:56 (ссылка)

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

Загрузка ...

Шустрый

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

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
<head></head>

<body style="height:100%; margin:0;">
<div style="position:absolute; top:0; left:0;height: 100% auto!important; min-height:100%; border-left: 3px solid red; "></div>
<div style="height: 100% auto!important; min-height:100%; border-right: 3px solid red;"></div>

</body>
</html>

Проверено в FF 3.6, Chrome 10, IE 8

Это сообщение отредактировал(а) KatyaXml - 1.1.2011, 10:56

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