29 мая 2009, 12:51

Position: absolute;

Продолжая ставшим кажется уже бесконечным сериал о фиксированных блоках (колонках) на web-странице, предлагаю вашему вниманию еще одну из возможных реализаций.

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

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

Хочется выразить признательность Вадиму Ласто, благодаря которому и появилась вариация на тему.

Одной из главных проблем в предлагаемом мной методе разметки каркаса web-страницы с фиксированными элементами, является вполне закономерное желание простыми средствами получить возможность центрирования макета относительно вертикальных границ окна браузера при различных размерах диагонали и разрешениях экрана монитора с помощью привычной всем связки - margin:0 auto; и min/max-width с эмуляцией оного для IE6, без изменения остальных размеров.

Рассмотрим базовую разметку:

<body>
  <div class="wrap">
    <div class="header">Header</div>
    <div class="middle">Middle</div>
    <div class="footer">Footer</div>
  </div>
  <div class="fixed">Fixed</div>
</body>

Чтобы зафиксировать колонку, запретив ее прокручивание по вертикали, выполняем стандартную процедуру, прописав в стилях:

html {overflow-y:hidden;}
html,body,.wrap {height:100%;}
body,.wrap {position:relative;}
.wrap {overflow-y:auto;}
.fixed {
  position:absolute;top:XXpx;
  right:XXpx;bottom:XXpx;width:XXpx;
}

Теперь вертикальный скролл принадлежит контейнеру с классом wrap, и вот тут-то начинаются разночтения, блоки header, middle, footer позиционируются относительно границ .wrap, а блок .fixed относительно границ body.

Если задать margin:0 auto; и min/max-width для .wrap наша фиксированная колонка при уменьшении размеров окна браузера будет наезжать или прятаться под него, здесь рулит z-index.

Этого можно избежать передав стили: margin:0 auto; и min/max-width - body, но вертикальная прокрутка принадлежащая контейнеру wrap будет оторвана от правой границы окна браузера, что по визуалу смотрится совершенно не к месту и нарушает целостную картинку.

Идея Мастера Lasto заключается в следующем - надо тем или иным способом попытаться скрыть вертикальный скролл. И ему удалось, мягко, но настойчиво побороть мои сомнения, относительно того, что для пользователя подобного рода изыск, может показаться ущербным и ввести его в ступор :)

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

Но стоит ли этого бояться?

Нечто подобное предлагалось пару лет назад - оригинал, перевод, но, посмотрев пример к статье и увидев дополнительные прокрутки, что абсолютно не украшают, кто бы, что не говорил, и не под каким "соусом" делать этого я бы не стал, а также отсутствие возможности простыми средствами прикрутить min/max-width, в голову, так или иначе, придет мысль, что прием, озвученный в данной публикации - путь в никуда.

В общем, предложение Вадима прошло проверку в боевых условиях, даю линк на реально работающий ресурс, побродите по ссылкам меню, там есть несколько вариантов разметки, ставший полигоном для эксперимента, за что еще раз говорю большое спасибо Мастеру, не убоявшегося отдать свое детище в руки маньяка, которому дай только волю, а для этого дела времени и не жаль вовсе...

Поиздеваться над стилями и html - ох, как люблю :)

Стоит заметить, там разметка выполнена несколько по иному принципу и с использованием процентов, что при уменьшение размеров окна браузера, переходе с одного разрешения на другое, приводит к небольшим погрешностям - расстояние между областью контента и фиксированной колонкой, меняется.

В статьях автора, посвященным вопросам глобальной разметке, в большинстве примеров, почти всегда, все блоки имеют border, что довольно наглядно показывает взаимное расположение их относительно друг друга, а также позволяет четко отследить возможные не состыковки в реальных условиях.

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

Вернемся к вертикальному скроллу.

Так, как мы используем абсолютное позиционирование, проблем нет никаких.

Собственно в базовой разметке это решается сдвигом фиксированного блока в право, что приводит к накрыванию прокрутки.

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

Пример.

Это наиболее универсальное решение и оно пригодится для иных макетов, производных от базовой разметки, не все, но возможные варианты.

Тогда наш html-код примет следующий вид:

<body>
  <div class="wrap">
    <div class="header">Header</div>
    <div class="middle">Middle</div>
    <div class="footer">Footer</div>
  </div>
  <div class="fixed">Fixed</div>
  <div class="fixed_scroll"></div>
</body>

При отсутствии вертикальной прокрутки, страница вглядит несколько не обычно, нет опознавательных знаков для пользователя, чтобы хотя бы приблизительно определиться на каком участке оной он находится, но меню расположенное в фиксированной колонке, которое всегда доступно, с лихвой окупает это маленькое досадное недоразумение :)

Проверено и работоспособно в IE6(7,8), FireFox 3.08, Google Chrome, SafariWin.

OPERA, у меня стоит версия 9.64, в мадших версиях разметка не проверялась, вскоре по праву займет достойное место "дедушки" (IE6), которому давно пора на пенсию, хотя с возложенной на него задачей, даже не понимая одновременно top:XX; и bottom:XX; справился отменно, получив "черную" метку и будет первым браузером, занесенным мной в разряд изгоев, за свою тупость :(

Комментариев: 10