Привет всем!

Задача.
Окно браузера должно быть разбито на две части. В верхней навигационная менюшка, в нижней контент. При этом навигационная менюшка должна всё время быть наверху, как будто страница состоит из двух фреймов. Но опять же, нужно обойтись без них (фреймов) .

Мысли по поводу решения.
Растянуть талицу из двух строк (по одной ячейке в каждой строке) на всю страницу. В каждую ячейку по DIV'у, который и будет обрезать контент и прочее, что вылазит за пределы ячейки (поскольку в браузерах на движках геко прокрутка в ячейках таблицы не появляется, приходится пользоваться DIV'ами). Свойства CSS задать следующим образом:

Код

.razm { border-collapse : collapse ; width : 100% ; height : 100% } .razm > TBODY > TR > TD { padding : 0 ; height : * } .razm > TBODY > TR > TD > DIV { width : 100% ; height : 100% ; overflow : auto ; clip : 0 }

А код HTML наваять такой:

Код

<table class='razm'> <tr><td style='width : 30px'><div>Содержание навигационной менюшки</div></td></tr> <tr><td><div>Контент сайта</div></td></tr> </table>

Т.е., по идее, я задаю высоту навигационной менюшки атрибутом style, а высота ячейки второй строчки остаётся '*'.

Собственно, проблема заключается в том, что моя идея не работает ни в одном браузере:

• IE вообще не создаёт прокрутки. Всё отображает на одной странице целиком.
• Opera отображает только верхнюю часть (менюшку), контента нет .
• Gecko показывает верхнюю часть (менюшку) правильно, как и опера, в случае необходимости включает прокрутку. А нижняя часть (контент) уезжает вниз (горизонтальную прокрутку создаёт, если нужно, а вертикальную - нет. Просто уезжает).

Подскажите, пожалуйста, в чём проблема.

Спасибо.

Ещё один вариант. Создаём два элемента DIV.

Код

.razm { width : 100% ; height : * ; padding : 0 ; margin : 0 ; overflow : auto ; clip : 0 }

Код

<div class='razm' style='height : 30px'>Меню</div> <div class='razm'>Содержание.</div>

Работает везде одинаково: если размер указать в % или *, т.е., не фиксированно, то поле растягивается в высоту как хочет (в ширину нормально создаётся прокрутка). Если указать фиксированный размер - всё становится нормально.

1. Селектор > не работает под ИЕ.

2. С height: * и height: 100% я бы посоветовал быть поосторожнее.

3. Создайте таблицу, в неё засуньте дивы height: ... width: ... overflow: auto; Идея понятна?

Цитата(dm9 @ 19.7.2005, 22:54)

3. Создайте таблицу, в неё засуньте дивы height: ... width: ... overflow: auto; Идея понятна?

То есть, использовать фиксированные размеры таблицы?

Таблица с 100% высотой и таким разбиением по ячейкам, как тебе надо. В ячейках - дивы. В дивах - контент. Когда контент не влезает в ячейки, появляется прокрутка. Правда, боюсь, ни под один DOCTYPE это не прокатит. Только если документ начинается сразу с html, без dtd.

dm9, я сделал следующим образом.

Код

TABLE.razm { width : 100% ; height : 100% ; border-collapse : collapse ; border-style : solid ; border-width : thin } TABLE.razm TD { padding : 0 ; border-style : solid ; border-width : thin } TABLE.razm TD > DIV { overflow : auto ; clip : 0 ; margin : 0 ; padding : 0 }

Код

<table class='razm'>   <tr><td style='height : 30px'><div>     меню   </div></td></tr>   <tr><td><div>     Содержание   </div></td></tr> </table>

1. Работает только с фиксированными размерами.
2. С горизонтальной прокруткой проблемы нет, вертикальная прокрутка не появляется (если размер не фиксированный), т.е., появляется прокрутка самой страницы.
3. А чем это отличается от первого сообщения в теме?

diam, ну я же написал

Цитата(dm9 @ 19.7.2005, 23:54)

1. Селектор > не работает под ИЕ.

Остальное посмотрю позже.

Цитата(dm9 @ 20.7.2005, 13:48)

Остальное посмотрю позже.

Спасибо

Я извиняюсь, но UP!

Я не обнаглею, если ещё раз скажу UP! ^)

Сорри, совсем нет времени посмотреть Попробую сегодня вечером.

На сколько я понял задача зафиксировать меню на странице. Есть стиль position: fixed для этих целей, но ИЕ пока не поддерживает.

НО! После прочтения: http://www.stunicholls.myby.co.uk/layouts/fixed.html всё может получиться. Сразу предупреждаю, после махинаций с ИЕ у тебя все элементы с position: relative и absolute будут вести себя как position: fixed; Если это фатально, то метод использовать нельзя
Второе ограничение, это то что фича работает только в XHTML документе.

Смотрим результат: http://sardar.vingrad.ru/vingradattaches/I...ition_fixed.htm

Кратко:
Выставляем для body height: 100%; overflow-y: auto; и ИЕ переходит в "особый режим"(вообще это баг ). Для остальных браузеров визуально ничего не меняеться.
Для ИЕ6 html вдруг станет самым внешним контейнером и будет сушить мозги ещё одной вертикальной полосой прокрутки, отрубаем:

Код

<!--[if IE 6]>    <style type="text/css">    /*<![CDATA[*/  html {overflow-x:auto; overflow-y:hidden;}    /*]]>*/    </style> <![endif]-->

Теперь все элементы с position: absolute|relative у нас на фиксированной позиции в ИЕ. Далее ставим их действительно на positon: fixed + добавляем хак для ИЕ, где переопределяем fixed на absolute|relative;

Код

#fxd {   position:fixed; } * html #fxd {position:relative;} /* Никто кроме ИЕ сие не прочтёт */

Больше о хаках можно узнать отсюда: http://www.dithered.com/css_filters/index.html

Заметим что position: fixed это больше чем просто отображение. При печати такой элемент будет рисоваться на всех страничках. В случае ИЕ такого не будет, хотя не проверял

Sardar, изначально задача стояла именно так: аналог фреймов. Цель - разбить страницу на сколько угодно сегментов, информация в каждом из которых прокручивается в случае необходимости. position:fixed - не совсем то, но ты натолкнул меня на мысль.

Спасибо, в общем. Коплю плюсы, пока ставить не могу

Sardar , в ИЕ глючит В сролле нет нижней стрелочки)) Или это только у меня?