Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Помогите сделать DIV по высоте окна 100%  [new]
armix2000
Member

Откуда:
Сообщений: 1182
<!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 занимали вертикально оставшуюся область окна?

Как это можно решить?
9 апр 08, 11:56    [5523383]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
illion
Member

Откуда:
Сообщений: 1278
задайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.
9 апр 08, 12:05    [5523490]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
armix2000
Member

Откуда:
Сообщений: 1182
illion
задайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.


не работает, т.к sidebar, content растягивается на 100%+ширина header!
9 апр 08, 12:25    [5523681]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
LINUXER
Member

Откуда:
Сообщений: 1359
Ну можно перейти на абсолютное позиционированние, задать для нижних дивов и top и bottom. А для ie6 написать expression.
Вот только растяжение по содержимому гораздо удобней
9 апр 08, 13:56    [5524405]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
trevojnui
Member

Откуда: Челябинск
Сообщений: 92
На сколько я понимаю, вы хотите изучить div'ную верстку? Если да, то вот хорошие примеры как это реализовать. Если что то не поймете, просто откройте html - код страницы http://matthewjamestaylor.com/blog/perfect-3-column.htm
9 апр 08, 15:34    [5525180]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
armix2000
Member

Откуда:
Сообщений: 1182
trevojnui
На сколько я понимаю, вы хотите изучить div'ную верстку? Если да, то вот хорошие примеры как это реализовать. Если что то не поймете, просто откройте html - код страницы http://matthewjamestaylor.com/blog/perfect-3-column.htm


Там все опять с процентами, я же говорю что не могу указать процент для header, т.к там картинка лого, и при разных разрешениях этот слой в процентах то больше лого то меньше его!
9 апр 08, 16:16    [5525601]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
lanzer
Member

Откуда:
Сообщений: 201
Интересный вопросик. Если сильно торопишься, то как вариант JS в помощь. Елси не сильно, то надо подумать. Так сразу не скажу.
9 апр 08, 16:30    [5525740]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
armix2000
Member

Откуда:
Сообщений: 1182
lanzer
Интересный вопросик. Если сильно торопишься, то как вариант JS в помощь. Елси не сильно, то надо подумать. Так сразу не скажу.


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

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

Помогите не сойти с ума!
9 апр 08, 16:52    [5525919]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
lanzer
Member

Откуда:
Сообщений: 201
armix2000
illion
задайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.


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


Кстати пробывали на практике? Или чисто теоретически определили что не работает? Т.к. мне тоже видится это решением.
9 апр 08, 17:07    [5526035]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
illion
Member

Откуда:
Сообщений: 1278
lanzer
armix2000
illion
задайте контенту и сайдбару высоту 100%. Хедер их ужмет как надо.

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

Кстати пробывали на практике? Или чисто теоретически определили что не работает? Т.к. мне тоже видится это решением.

нет, действительно не работает с дивами.

armix2000 , остается js. На window.onload и window.onresize определяйте высоту хедера (clientHeight) и высоту окна (document.body.clientWidth) и разницу между ними назначайте сайдбару и контенту.
10 апр 08, 00:05    [5527564]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
LINUXER
Member

Откуда:
Сообщений: 1359
блинн...
нате
<!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>

10 апр 08, 06:21    [5527726]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
illion
Member

Откуда:
Сообщений: 1278
LINUXER
блинн...
нате

С ие вы макет подружили через expressions. ФФ умный - сам дивы ресайзит. Но опера то их намертво отрисовывает до низа экрана и этот размер при ресайзе не изменяется.
10 апр 08, 06:40    [5527731]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
LINUXER
Member

Откуда:
Сообщений: 1359
illion

С ие вы макет подружили через expressions. ФФ умный - сам дивы ресайзит. Но опера то их намертво отрисовывает до низа экрана и этот размер при ресайзе не изменяется.

какая версия?
9.00 - полёт нормальный =\
10 апр 08, 07:01    [5527741]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
illion
Member

Откуда:
Сообщений: 1278
LINUXER

какая версия?
9.00 - полёт нормальный =\

ааах вот она значит какая... 9.0 (9.0.8031.0). В 9.02 нормально работает. Блин, да сколько ж их надо протестировать! Тьфу ты.
10 апр 08, 07:33    [5527770]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
armix2000
Member

Откуда:
Сообщений: 1182
LINUXER
блинн...
нате
<!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"> всегда был на одной линии внизу с контентом?
10 апр 08, 10:49    [5528607]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
LINUXER
Member

Откуда:
Сообщений: 1359
armix2000

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

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

armix2000

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

идеальный способ - сделать их ячейками таблицы=)
10 апр 08, 12:30    [5529556]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
LINUXER
Member

Откуда:
Сообщений: 1359
LINUXER

Они оба всегда останутся одинаковыми

только IE растягивает
10 апр 08, 13:00    [5529831]     Ответить | Цитировать Сообщить модератору
Между сообщениями интервал более 1 года.
 Re: Помогите сделать DIV по высоте окна 100%  [new]
пак и пак
Member [заблокирован]

Откуда: Пхеньян
Сообщений: 141
Сделай у HTML и у BODY высоту 100%, и будет тебе счастье!
22 май 09, 16:49    [7216961]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
IDVsbruck
Member

Откуда: Украина
Сообщений: 4262
Парень неплохо шарит: gjinks. Тут даже с усложнением - на 3 колонки. Исключительно сделано через CSS с кучей хаков под всевозможные браузеры. Не проверял, но подход понравился.
22 май 09, 20:22    [7217699]     Ответить | Цитировать Сообщить модератору
 Re: Помогите сделать DIV по высоте окна 100%  [new]
-=SAN=-
Guest
во блин. и надо же так извращаться. ставь height="100%" , после чего смени в хедере 1ю строку на "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">" и все.. нечего жопу рвать по пустякам
3 ноя 09, 16:12    [7877880]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить