ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите сделать DIV по высоте окна 100%
20 сообщений из 20, страница 1 из 1
Помогите сделать DIV по высоте окна 100%
    #35244879
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*{margin: 0 ; padding: 0 ; border: 0 }
html,body{height: 100 %}
#main{width:700px; height: 100 %; margin: 0  auto}
#header{margin: 0 ; height: 10 %; background:#EEE}

#content{float:left;width:500px; height: 90 %;background:#19CAFF}
#sidebar {float:right; width:200px; height: 90 %; background:#B9CAFF}
</style>
</head>

<body>
<div id="main">
  <div id="header">header</div>
  <div id="sidebar">sidebar</div>
  <div id="content">content</div>
</div>
</body>
</html>


В этом примере все отлично, т.е центральные DIV'ы идут до конца окна вертикально.

НО мне надо сделать как-то чтобы sidebar, content занимали все до конца окна вниз, заведомо не зная сколько в % занимает header, т.к в моем случае в header есть картинка, и задавая % при разных разрешениях этот слой больше или меньше картинки в header

Поэтому я не могу расчитать height для слоев header, sidebar, content и поэтой причине не могу сделать так, чтобы sidebar, content занимали вертикально оставшуюся область окна?

Как это можно решить?
...
Рейтинг: 0 / 0
09.04.2008, 11:56
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35244928
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
задайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.
...
Рейтинг: 0 / 0
09.04.2008, 12:05
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35245010
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
illionзадайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.

не работает, т.к sidebar, content растягивается на 100%+ширина header!
...
Рейтинг: 0 / 0
09.04.2008, 12:25
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35245348
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
LINUXER
Участник
Ну можно перейти на абсолютное позиционированние, задать для нижних дивов и top и bottom. А для ie6 написать expression.
Вот только растяжение по содержимому гораздо удобней
...
Рейтинг: 0 / 0
09.04.2008, 13:56
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35245713
trevojnui
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
trevojnui
Гость
На сколько я понимаю, вы хотите изучить div'ную верстку? Если да, то вот хорошие примеры как это реализовать. Если что то не поймете, просто откройте html - код страницы http://matthewjamestaylor.com/blog/perfect-3-column.htm
...
Рейтинг: 0 / 0
09.04.2008, 15:34
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35245939
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
trevojnuiНа сколько я понимаю, вы хотите изучить div'ную верстку? Если да, то вот хорошие примеры как это реализовать. Если что то не поймете, просто откройте html - код страницы http://matthewjamestaylor.com/blog/perfect-3-column.htm

Там все опять с процентами, я же говорю что не могу указать процент для header, т.к там картинка лого, и при разных разрешениях этот слой в процентах то больше лого то меньше его!
...
Рейтинг: 0 / 0
09.04.2008, 16:16
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35245993
lanzer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
lanzer
Участник
Интересный вопросик. Если сильно торопишься, то как вариант JS в помощь. Елси не сильно, то надо подумать. Так сразу не скажу.
...
Рейтинг: 0 / 0
09.04.2008, 16:30
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35246061
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
lanzerИнтересный вопросик. Если сильно торопишься, то как вариант JS в помощь. Елси не сильно, то надо подумать. Так сразу не скажу.

Время есть, но немного.

Вообще вроде вопрос простой, а голову ломаю над ним уже 2 дня!

Помогите не сойти с ума!
...
Рейтинг: 0 / 0
09.04.2008, 16:52
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35246121
lanzer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
lanzer
Участник
armix2000 illionзадайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.

не работает, т.к sidebar, content растягивается на 100%+ширина header!

Кстати пробывали на практике? Или чисто теоретически определили что не работает? Т.к. мне тоже видится это решением.
...
Рейтинг: 0 / 0
09.04.2008, 17:07
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35246843
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
lanzer armix2000 illionзадайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.
не работает, т.к sidebar, content растягивается на 100%+ширина header!
Кстати пробывали на практике? Или чисто теоретически определили что не работает? Т.к. мне тоже видится это решением.
нет, действительно не работает с дивами.

armix2000 , остается js. На window.onload и window.onresize определяйте высоту хедера (clientHeight) и высоту окна (document.body.clientWidth) и разницу между ними назначайте сайдбару и контенту.
...
Рейтинг: 0 / 0
10.04.2008, 00:05
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35246934
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
LINUXER
Участник
блинн...
нате
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*{margin: 0 ; padding: 0 ; border: 0 }
html,body{height: 100 %}
#main{width:700px; height: 100 %; margin: 0  auto;position:relative;}
#header{margin: 0 ; height:100px; background:#EEE}

#content{position:absolute;
	left:0px;
	top:100px;
	bottom: 0px;
	width:500px; background:#19CAFF;
	height: expression(document.body.clientHeight- 100 +"px")
}

#sidebar {
	position:absolute;
	left:500px;
	top:100px;
	bottom: 0px;
	width:200px;  background:#B9CAFF;
	height: expression(document.body.clientHeight- 100 +"px")
}

</style>
</head>

<body>
<div id="main">
  <div id="header">header</div>
  <div id="sidebar">sidebar</div>
  <div id="content">content</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
10.04.2008, 06:21
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35246939
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
LINUXERблинн...
нате

С ие вы макет подружили через expressions. ФФ умный - сам дивы ресайзит. Но опера то их намертво отрисовывает до низа экрана и этот размер при ресайзе не изменяется.
...
Рейтинг: 0 / 0
10.04.2008, 06:40
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35246946
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
LINUXER
Участник
illion
С ие вы макет подружили через expressions. ФФ умный - сам дивы ресайзит. Но опера то их намертво отрисовывает до низа экрана и этот размер при ресайзе не изменяется.
какая версия?
9.00 - полёт нормальный =\
...
Рейтинг: 0 / 0
10.04.2008, 07:01
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35246972
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
LINUXER
какая версия?
9.00 - полёт нормальный =\
ааах вот она значит какая... 9.0 (9.0.8031.0). В 9.02 нормально работает. Блин, да сколько ж их надо протестировать! Тьфу ты.
...
Рейтинг: 0 / 0
10.04.2008, 07:33
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35247363
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
LINUXERблинн...
нате
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*{margin: 0 ; padding: 0 ; border: 0 }
html,body{height: 100 %}
#main{width:700px; height: 100 %; margin: 0  auto;position:relative;}
#header{margin: 0 ; height:100px; background:#EEE}

#content{position:absolute;
	left:0px;
	top:100px;
	bottom: 0px;
	width:500px; background:#19CAFF;
	height: expression(document.body.clientHeight- 100 +"px")
}

#sidebar {
	position:absolute;
	left:500px;
	top:100px;
	bottom: 0px;
	width:200px;  background:#B9CAFF;
	height: expression(document.body.clientHeight- 100 +"px")
}

</style>
</head>

<body>
<div id="main">
  <div id="header">header</div>
  <div id="sidebar">sidebar</div>
  <div id="content">content</div>
</div>
</body>
</html>



Ваш пример работает, но только при небольшом контенте, а если текст в <div id="content"> будет много - тогда <div id="sidebar"> уже не на одной линии внизу сним, а остается вверху.

Как сделать, чтобы <div id="sidebar"> всегда был на одной линии внизу с контентом?
...
Рейтинг: 0 / 0
10.04.2008, 10:49
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35247834
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
LINUXER
Участник
armix2000
Ваш пример работает, но только при небольшом контенте, а если текст в <div id="content"> будет много - тогда <div id="sidebar"> уже не на одной линии внизу сним, а остается вверху.

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

armix2000
Как сделать, чтобы <div id="sidebar"> всегда был на одной линии внизу с контентом?

идеальный способ - сделать их ячейками таблицы=)
...
Рейтинг: 0 / 0
10.04.2008, 12:30
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #35247972
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
LINUXER
Участник
LINUXER
Они оба всегда останутся одинаковыми

только IE растягивает
...
Рейтинг: 0 / 0
10.04.2008, 13:00
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
Помогите сделать DIV по высоте окна 100%
    #36002570
пак и пак
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
пак и пак
Участник
Сделай у HTML и у BODY высоту 100%, и будет тебе счастье!
...
Рейтинг: 0 / 0
22.05.2009, 16:49
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #36002934
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Парень неплохо шарит: gjinks . Тут даже с усложнением - на 3 колонки. Исключительно сделано через CSS с кучей хаков под всевозможные браузеры. Не проверял, но подход понравился.
...
Рейтинг: 0 / 0
22.05.2009, 20:22
| Ответить | Цитировать | Написать  
Помогите сделать DIV по высоте окна 100%
    #36288805
-=SAN=-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-=SAN=-
Гость
во блин. и надо же так извращаться. ставь height="100%" , после чего смени в хедере 1ю строку на "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">" и все.. нечего жопу рвать по пустякам
...
Рейтинг: 0 / 0
03.11.2009, 16:12
| Ответить | Цитировать | Написать  
20 сообщений из 20, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите сделать DIV по высоте окна 100%
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1454028]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 151ms
get topic data:
 8ms
get first new msg:
 4ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 260ms
total:  494ms
созд. / загр.: 494ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]