Не однократно писал, что проблемы связанные с использованием position:fixed; по прямому назначению или игнорируются, или не понимаются. К сожалению, очень многие не удосуживаются копнуть чуть глубже.

Об этом говорит, начало топика, его более или менее конструктивная часть.

Сразу замечу, возможные вопросы о том, зачем это нужно, о целесообразности предлагаемого вам метода, вы должны решать для себя самостоятельно.

В том, что подобного рода разметка, выполненная чисто на html и css без привлечения JavaScript, часто бывает необходимой по тем или иным причинам, можно почитать здесь.

Не смотря на то, что статья написана давно, она не потеряла своей актуальности и ныне.

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

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

Итак.

В чем главная проблема прямого применения position:fixed;? Пока не будем говорить о том, что это не работает в IE6.

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

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

Было предпринято бесчисленное количество попыток, сделать эмуляцию данного стилевого правила для IE6.

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

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

Пример номер два. Тот же принцип разметки, но предпринята попытка с помощью JavaScript, избавиться от пустоты между колонками при разных разрешениях.

Скрипт описан в статье …Ликбез

Согласитесь, но это не совсем то, что нам бы хотелось.

А хотелось бы вот чего.

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

Есть ли возможность избежать всех перечисленных выше неприятностей?

Ответ был дан в статье …Откроем карты.

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

Предлагаемые вам примеры, показывают возможное расположение фиксированной колонки. Этим применение метода/приема, понятное дело не ограничивается.

Все в ваших руках.

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

Можно вообще окружить область контента фиксированными блоками.

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

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

Продолжая занимательные эксперименты с position:fixed; без упоминания его самого в таблице стилей, прихожу к мысли, что тема сама по себе очень интересная, но на мой взгляд, совершенно не заслуженно обделена вниманием, как верстальщиков, так и W3C. Этому есть ряд причин, вот и откроем карты, основываясь на "position:fixed; - эмуляция Gordi".

Это не окончательный релиз :) и многосериальное "кино" ждет своего продолжения.

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

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

Это не просто слова.

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

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

Понятно, кое-кто может не согласиться, но спросим не согласных, что же вы милые мои не уделили этим вопросам толику своего драгоценного времени, если все так просто?

Вам это не надо?

А может быть дело совсем в другом?

Вы этого не умеете и не знаете, как это сделать и в этом так трудно признаться даже самому себе?

Скорее всего, так оно и есть.

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

Но поверьте, этого мало.

Вернемся к более привычным для нас вещам.

Для начала забавный скриншот.

Думаю, при использовании предложенного мной метода у вас никогда не будет подобных разочарований. Открыв эту страницу сможете, сами убедиться и в живую посмотреть, как "любимая" контора, лажается по полной программе. Горизонтальная прокрутка с превеликой радостью поможет вам в этом при уменьшении размеров окна браузера.

Собственно, в том, что предлагается вам, вся проблема только в OPERA, не понимает она индивидуального указания – overflow-x или overflow-y, причем в 9.23 в отличии скажем от 9.5, картина меняется, в младшей версии есть горизонтальная прокрутка, а в старшей версии напрочь отсутствует.

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

Не буду приводить html-кода и стилей, там все более или менее прозрачно.

Предлагаю посмотреть реализацию в формате скрипта Мастера Lasto для магазина "MultiAgent".

Это одна из ранних версий эмуляции position:fixed;, где издержки OPERA очевидны и он/она в который раз теряет свое лицо :), нет горизонтальной прокрутки при уменьшении размеров окна браузера.

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

Но подобного рода дизайн в данном цветовом решении для скриптов - Agent, MultiAgent, nano-CMS и blog, находится у Вадима, и возможно вскоре они будут выставлены в его шопе.

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

Желающие, заказать нечто подобное для Portator-а, обращаются лично ко мне, тут все будет строго индивидуально, думаю на нынешнем этапе, этот скрипт выходит из моды, но все возможно…

Вернемся к проблеме горизонтальной прокрутки в OPERA.

Лучшим решением было бы оставить все, как есть.

Но…

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

Следуя инструкциям, расположенным на тестовых страницах, вы сможете убедиться в этом сами.

Ну не писать же, в самом деле, из-за этого под каждый браузер собственные стили.

А может, кому-то и удастся, к всеобщему удовольствию, найти решение.

P.S. Размещение контейнеров header, middle, footer и сто процентная высота страницы с минимальной вертикальной прокруткой, в ней по вполне понятным причинам есть необходимость, выполнены по блочно-модульной концепции "Техника Gordi" и мало распространенной методике прижатия footer-а (вариация) к нижней границе окна браузера, соответственно.

Не искусства ради или спортивного интереса…

Пусть не всегда, но цель оправдывает средства, применяемые для ее достижения.

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

Обойдемся без риторических вопросов, а почему собственно…

Давайте, просто сделаем это.

Итак.

<body>
  <div id="header">Header</div>
  <div id="middle">
    <div class="content">Content</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div id="footer">Footer</div>
</body>

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

Что нам до них, попутного ветра дорогие товарищи :)

Посмотрим стили:

* {margin:0;padding:0;}
html,body {height:100%;}
body {
  background-color:#eee;
  margin:0 auto;
  min-width:910px;
  max-width:960px;
}
*html body {
  width:expression(
  document.documentElement.clientWidth < 910 ? '910px':
  (document.documentElement.clientWidth > 960 ? '960px':'auto'));
  zoom:1;
}
*html #middle {overflow-y:visible;height:100%;}
#middle,.content,.left,.right {overflow:hidden;}
#middle {
   border:#00f solid;border-width:0 1px;
   margin-top:-202px; /* height header+footer */
   padding:0 200px;
   min-height:100%;
}
.content,.left,.right {
   float:left;
   margin-top:202px; /* height header+footer */
   margin-bottom:-32767px;
   padding-bottom:32767px;
}
.content {background-color:#fff;margin-right:-100%;width:100%;}
.left {background:#ee9;margin-left:-200px;width:200px;}
.right {
   background:#9dd;
   float:right;
   margin-right:-200px;
   width:200px;
}
*html .right {margin-right:-100px;}
#header {
   background-color:#cce;
   border-top:#00f 1px solid;
   height:100px;
}
#footer {
   background-color:#e9e;
   border:#00f solid;
   border-width:0 1px 1px;
   clear:both;
   height:100px;
}

На что следует обратить внимание.

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

Реализовано это следующим образом.

Для контейнера middle задается отрицательный верхний отступ в сумме равный высоте header и footer, выделено зеленым. Тем самым мы поднимаем страницу вверх.

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

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

Вот собственно и все.

Сегодня исключение из правил, пример всего один, но сделать макеты с различным расположением колонок навигации относительно области контента, очень просто, достаточно посмотреть примеры (вариант № 1) к предыдущему посту.