Основа основ
Решая проблему эмуляции {position: fixed;} для IE6, все, так или иначе, держали в голове само это правило для тех браузеров, в которых его понимают и способны с ним работать.
Но в этом и заключается главная ошибка, так, как само по себе применение этого стилевого правила не панацея от всех выше описанных проблем.
С другой стороны, если эмуляция {position: fixed;} для IE6 основанная на {position: absolute;} практически без проблем работает в нем, почему она не может стать основным инструментом и для других браузеров?
Хрестоматийный, уже ставший классикой прием:
CSS
* {margin:0;padding:0;}
html,body {height:100%;}
.wrap {
background-color:#fff;position:absolute;left:XXpx;
width:XXpx;min-height:100%;z-index:1;
}
.fixed {
position:fixed;left:XXpx;
width:XXpx;height:100%;
}
*html html {overflow:hidden;}
*html #box {
position:absolute;left:0;
overflow:auto;width:100%;height:100%;
}
*html .wrap {height:100%;}
*html .fixed {position:absolute;}
HTML
<body>
<div id="box">
<div class="wrap">Content</div>
</div>
<div class="fixed">Fixed</div>
</body>
В предлагаемом мной методе фиксации блоков не подверженным прокрутке при скроллировании основной страницы практически все тоже самое, но требуется на много меньше и стилей и html-кода:
CSS
* {margin:0;padding:0;}
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;
}
HTML
<body>
<div class="wrap">Content</div>
<div class="fixed">Fixed</div>
</body>
Как видим никакого упоминания {position: fixed;}, нет необходимости в этом, в дальнейшем будем оперировать только {position: absolute;}.
Странно, что этот момент лежащий на поверхности, никому до сих пор не приходил в голову, а ведь позволяет совершенно иначе взглянуть на физику процесса поведения web-страницы, помогая решить главную проблему – проблему неподвижности фиксированного блока (колонки) при уменьшении размеров окна браузера до появления горизонтальной прокрутки и играми с ней.
Теперь фиксированный блок (колонка) будут двигаться вместе с областью контента, как в обычном макете со стандартной разметкой и дополнительными колонками по горизонтали, которые в то же самое время будут прокручиваться в окне браузера при наличии вертикальной прокрутки.