Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> как сделать размер страницы не более 100% окна? 
:(
    Опции темы
alex77
Дата 18.1.2007, 11:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


жывтоне чочо
*


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

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



Здравствуйте.
Как сделать на странице 3 горизонтальных блока, первый высотой 24px, второй - высотой 19px, а третий - всё остальное пространство окна браузера, при этом если содержимое 3-го блока превышает его размеры, то в нём появляются полосы прокрутки. В окне браузера полосы прокрутки не появляются. При изменении пользователем размеров окна - размеры 3-го блока меняются соответственно. Если я не совсем понятно описал, есть схема в прикрепленном файле. Спасибо.

Присоединённый файл ( Кол-во скачиваний: 18 )
Присоединённый файл  image.gif 9,26 Kb
PM MAIL ICQ   Вверх
alex77
Дата 18.1.2007, 15:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


жывтоне чочо
*


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

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



Пока получился такой вариант:
Код

<!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="width: 100%; height: 100%; padding: 0; margin: 0; border: 0; overflow: hidden;">
<head>
<title id="docTitle">организации</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
</head>
<body id="documentbody" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0; overflow: hidden;">
<div style="background: #ddd; width: 100%; height: 100%;">
<div style="background: #eee; width: 100%; height: 24px;">
123
</div>
<div style="background: #cde; width: 100%; height: 19px;">
123
</div>
<div style="position: absolute; padding: 0; margin: 0; right: 0; top: 43px; bottom: 21px; height: expression(document.body.clientHeight - 64); width: 100%; border: 0; background: #F8FFF8; overflow: auto;">
1231231231231231231231231231231231231231231dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd1231231231231231231231231231231231231231231dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
</div>
<div style="background: #0f0; width: 100%; height: 20px; position: absolute; top: auto; bottom: 0;">
123
</div>
</div>
</body>
</html>

Проверял в FF2, IE6, Opera9. 
Вдруг у кого-нибудь будет похожая проблема, может пригодится smile

PM MAIL ICQ   Вверх
SamDark
Дата 18.1.2007, 16:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый кот
***


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

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



Что за expression?

Это сообщение отредактировал(а) SamDark - 18.1.2007, 16:06


--------------------
rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены
PM MAIL WWW GTalk Jabber MSN   Вверх
alex77
Дата 18.1.2007, 22:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


жывтоне чочо
*


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

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



Цитата
Что за expression?


Это для IE, и работает только там.
Здесь вот нашел про это: http://forum.htmlbook.ru/viewtopic.php?id=317.

Может, есть более простой способ реализовать то, что мне нужно? 



PM MAIL ICQ   Вверх
SelenIT
Дата 19.1.2007, 03:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

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



Цитата(alex77 @  18.1.2007,  22:57 Найти цитируемый пост)
Это для IE, и работает только там.

...причем только тогда, когда включен JS, т.к. по сути это тот же скрипт для динамического вычисления CSS-свойства.

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
alexu_id
Дата 19.1.2007, 08:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



предлагаю способ на основе CSS

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>
<style>
body, html { margin:0; padding:0; }
#frame1 { background-color:#ccffcc; position:absolute; width:100%; height:24px; top:0px; left:0px; z-index:1; }
#frame2 { background-color:#ffffcc; position:absolute; width:100%; height:19px; top:24px; left:0px; z-index:2; }
#frame3 { background-color:#ffccff; position:absolute; width:100%; height:100%; top:43px; left:0px; overflow: auto; z-index:3; }
</style>
<body>
<div id="frame1">frame1</div>
<div id="frame2">frame2</div>
<div id="frame3">frame3</div>


</body>
</html>


Это сообщение отредактировал(а) alexu_id - 19.1.2007, 08:16
PM MAIL   Вверх
alex77
Дата 19.1.2007, 08:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


жывтоне чочо
*


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

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



в FF и Opera всё работает также и при выключенном JS, а в IE если выключить JS, то высота не вычисляется, и размеры блока зависят от размера контента. Как бы это можно было обойти? Указано же свойство bottom, IE его игнорирует чтоль?

Добавлено @ 08:33 
alexu_id, в Вашем способе происходит прокрутка всего окна браузера, а мне надо, чтобы полосы прокрутки появлялись только в "frame3".
PM MAIL ICQ   Вверх
SHAmanovi4
Дата 19.1.2007, 13:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



А что если скрипт вычислять не в стилях, а в браузере по загрузке этого дива? И вызывать на onresize?
PM WWW ICQ   Вверх
SamDark
Дата 19.1.2007, 13:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый кот
***


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

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



SHAmanovi4, 
Так это тот же JS, с которым и проблемы в IE.


--------------------
rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены
PM MAIL WWW GTalk Jabber MSN   Вверх
SelenIT
Дата 19.1.2007, 13:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

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



alex77, IE (по крайней мере, 5-6) не умеет растягивать элементы, для кот. заданы одновременно top и bottom (в отличие от Gecko и Opera). Поэтому для него и необходима JS-добавка, компенсирующая этот недостаток пересчетом height. Чисто CSS-овое решение для IE, насколько мне известно, не существует. Но у 99% юзеров JS включен, а оставшихся вряд ли заботит красота и функциональность интерфейса - им главное, чтобы текст был читабелен (имхо)...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0598 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.