Видеокурс по созданию сайтов | Как зафиксировать блок в Internet Explorer 6.0?

Видеокурс

Доступность и привлекательность текста

Комментарии к видеоурокам

Урок #15. Как зафиксировать блок в Internet Explorer 6.0?
18 минут

Комментарий к видеоуроку содержит текстовое изложение решения задачи.

Зачем фиксировать? Если вы зафиксируете шапку документа, то при прокрутке этот блок будет всегда находиться наверху: наименование компании, логотип, адрес главной страницы и т.д. Но не только из меркантильных соображений стоит это делать.

Зафиксируйте блок с верхней навигацией (меню), и тогда посетитель сможет перейти по ссылкам в любом месте страницы. Правда, реализовать это в браузере Internet Explorer 6.0 сложнее, чем в других браузерах.

В браузерах Opera и Mozilla Firefox, используется свойство fixed. Например, в приведенном примере зафиксирован блок #topbar с меню на расстоянии 35px от верхнего края браузера:

#topbar {

position: fixed;
top: 35px;

}

Internet Explorer 6.0 не поддерживает fixed. Необходимо применить особый подход.

1. Для IE 6.0 необходимо, чтобы блок #topbar был позиционирован абсолютно. Для этого пишем хак для этой версии:

* html #topbar {

position: absolute;

}

2. Как абсолютно позиционированный блок приобретет свойства фиксированного? Для этого мы закрепляем содержание html, но делаем подвижным содержание body. Другими словами, нужно убрать полосу прокрутки у html, но добавить ее body. Высота html и body должна составлять 100%.

* html {

height: 100%;
overflow:hidden;

}

body {

overflow: auto;
height: 100%;

}

Недостаток этого метода заключается в том, что есть ограничивающие факторы:

1. Если у вас будут другие блоки с абсолютным позиционированием, то в IE 6.0 они автоматически будут фиксироваться, т.е. необходимо соблюдать определенные правила в верстке и разметке.

2. В моем случае вообще исчезла полоса прокрутки ( Для видеоурока использовалась такая страница, где фиксирование происходит без этой потери.)

Таким образом, мы получаем кроссбраузерное решение задачи.

Ссылки по теме:

Статья Андрея Шитова «Полноценный fixed в MSIE».
Emulating position fixed for Internet Explorer.
«Совместить fixed div и CSS menu».

Статьи