LINUX.ORG.RU
Форум — Web-development  

Страница с неподвижными областями


0

0

Структура страницы:
+--------+
| 1 |
+---+----+
| 2 | 3 |
+---+----+
1) верхняя неподвижная часть 25px шириной 100%
2) левая область прокрутки списка записей
3) правая неподвижная область отображения выбранной записи
Активно используется Javascript и AJAX.
Браузер FF, IE не понимает position:fixed.

Сделал три div. Результат немного не устраивает:
- Полоса прокрутки отображается справа всей
страницы и не работает колесо мыши при нахождении в области 3.
- Если задать ширину div3 100%, то текст выезжает за правую границу.
Если задать точно в px, то виден фон div2 справа от div3.
- Может потребоваться вертикальная прокрутка в div3,
которой сейчас нет.

Как понимаю, нужно в сторону frame смотреть?
Правильно ли сейчас использовать iframe и frame?






★

У div3 - ширина д.б. 100% и left-margin >= ширины div2.

Для получения полосы прокрутки внутри блока используй свойство overflow.

В целом, не очень понял макет.

Tigger ★★★★★
()
Ответ на: комментарий от Tigger

Верхняя полоса неподвижна, ширина 100%.
Под верхней полосой слева подвижная область отображает список,
ширина 500px, нужна вертикальная прокрутка.
Под верхней полосой справа неподвижная область
отображает данные по выбранной записи списка,
ширина оставшаяся от 100%-500px, иногда нужна прокрутка.

WinLin ★
() автор топика
Ответ на: комментарий от WinLin

div.header {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
bottom: auto;
z-index: 3;
background-color: #D0D0E0;
}

div.left {
position: absolute;
width: 400px;
height: auto;
top: 25px;
right: auto;
bottom: 0;
left: 0;
background-color: #ffffff;
margin: 1px;
overflow: auto;
}

div.right {
position: fixed;
width: 100%;
height: 100%;
top: 25px;
left: 401px;
background-color: #E0E0F0;
overflow: auto;
}

WinLin ★
() автор топика
Ответ на: комментарий от WinLin

body {
margin: 0;
padding: 0;
}
div.header {
height: 25px;
background-color: #D0D0E0;
}
div.left {
width: 500px;
float: left;
height: 100%;
margin-top: -25px;
}
div.right {
margin: 0;
margin-left: 500px;
height: 100%;
margin-top: -25px;
}
div.left_content, div.right_content {
overflow: auto;
height: 100%;
margin-top: 25px;
}
div.left_content {
background-color: #ffffff;
}
div.right_content {
background-color: #E0E0F0;
}
div.clear {
clear: both;
}

С шириной проблем нет, есть проблемы со 100% высотой. 25px вылазят. div.left_content и div.right_content находятся внутри левого и правого блоков соответственно. div.clear - в конце.

Tigger ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development