Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите сделать DIV по высоте окна 100% / 20 сообщений из 20, страница 1 из 1
09.04.2008, 11:56
    #35244879
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
Код: 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, 12:05
    #35244928
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
задайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2008, 12:25
    #35245010
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
illionзадайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.

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

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

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

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

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

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

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

armix2000 , остается js. На window.onload и window.onresize определяйте высоту хедера (clientHeight) и высоту окна (document.body.clientWidth) и разницу между ними назначайте сайдбару и контенту.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2008, 06:21
    #35246934
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
блинн...
нате
Код: 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:40
    #35246939
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
LINUXERблинн...
нате

С ие вы макет подружили через expressions. ФФ умный - сам дивы ресайзит. Но опера то их намертво отрисовывает до низа экрана и этот размер при ресайзе не изменяется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2008, 07:01
    #35246946
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
illion
С ие вы макет подружили через expressions. ФФ умный - сам дивы ресайзит. Но опера то их намертво отрисовывает до низа экрана и этот размер при ресайзе не изменяется.
какая версия?
9.00 - полёт нормальный =\
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2008, 07:33
    #35246972
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
LINUXER
какая версия?
9.00 - полёт нормальный =\
ааах вот она значит какая... 9.0 (9.0.8031.0). В 9.02 нормально работает. Блин, да сколько ж их надо протестировать! Тьфу ты.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2008, 10:49
    #35247363
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
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, 12:30
    #35247834
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите сделать DIV по высоте окна 100%
armix2000
Ваш пример работает, но только при небольшом контенте, а если текст в <div id="content"> будет много - тогда <div id="sidebar"> уже не на одной линии внизу сним, а остается вверху.

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

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

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

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


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