Изчезающий Fixed
Привнесем немного экзотики в разметку web-страницы, где для фиксирования колонок используется эмуляция {position:fixed;}, основанная на {position:absolute;}.
Проблем в этом классе разметки собственно говоря, только две:
- Наличие или отсуствие вертикальны прокрутки.
- Размещение информационной области сайта по центру рабочей части окна браузера.
С вертикальным скроллом все достаточно просто. В предлагаемых примерах он будет в наличии.
А вот с центрированием макета отностельно вертикальных границ, возможно только с использованием всех горизонтальных размеров в процентах, что само по себе из-за разночтений, что же это такое и, как это правильно расчитывать, с чем различные браузеры справляются с трудом и каждый понимает по своему, сплошная головная боль...
В тоже время фиксированные ширина всех колонок на web-странице заданная в пикселях, в общем случае, приводит к тому, что макет необходимо прибивать или к левой части рабочей области окна браузера или правой.
Это приводит к тому, что при разных ражрешениях экрана монитора появляются пустове пространство, которое не чем занять, кроме как какой либо графикой, пущенной background:url(...);
Высказанные выше соображения и попытки как-то разрешить возникающую пробему, привели к появлению разметки класса - "Изчезающий Fixed", что и предлагается вашему вниманию.
Первые два примера только на html и css.
Из примеров видно, фиксированные колонки при переполнении информацией могут индивидуально прокручиваться по вертикали без появления скролла, что привело к дополнительному html-коду, но в тоже время это позволяет в предложенном классе разметки, довольно простыми средствами использовать графику.
Возьмем за основу некогда предложенный автором ресурса метод изложенный в "Универсальном графическом контейнере". Само собой графика имеет свою специфику, но увеличение html-кода, полностью компенсируется возможностью с помощью всего двух графических файлов, минимального объема, создавать все колонки и блоки любой ширины, ограничение - ширина самой графики.
О том, как все себя ведет макет страницы при уменьшении размеров окна браузера по горизонтали, происано в примерах, текст находится в изчезающей колонке.