http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1282942899.html <p>На простой вопрос, можно ли с помощью position:fixed; создать полноценную web-страницу - большинство продвинутых верстальщиков без особых раздумий, дадут отрицательный ответ. И будут правы.</p> <p>Собственно о трудностях прямого использования position:fixed; писал не однократно, ничего не изменилось, и ждать в этом смысле каких либо подвижек не приходится, скорее всего, фиксация блоков на web-странице так и останется экзотикой.</p> <p>Как иллюстрация выше сказанному пара примеров.</p> <p>html-код не сложен, тоже самое относится к стилям описывающими его поведение.</p> <pre class="pre"> &lt;body&gt; <span style="color:#00f;">&lt;div id="content"&gt;</span> <span style="color:#080;">&lt;div class="content"&gt;…&lt;/div&gt;</span> <span style="color:#00f;">&lt;/div&gt;</span> <span style="color:#00f;">&lt;div id="fixed"&gt;</span> <span style="color:#080;">&lt;div class="content"&gt;…&lt;/div&gt;</span> <span style="color:#00f;">&lt;/div&gt;</span> <span style="color:#f00;">&lt;div class="fixed_scroll"&gt;&lt;/div&gt; &lt;div class="fixed_scroll no"&gt;&lt;/div&gt;</span> &lt;/body&gt; * {margin:0;padding:0;} html,body {background-color:#669;height:100%;} html {overflow:hidden;} #content,#fixed { background-color:#666;border:#ccc 1px solid; color:#fff;position:fixed;top:0;bottom:0;z-index:10; overflow:hidden;padding:10px 0; } #content {right:278px;min-width:600px;max-width:74%;} #fixed {right:30px;width:240px;} .fixed_scroll { background-color:#666;position:fixed;top:3px; right:279px;bottom:3px;z-index:100;width:20px; } .no {right:31px;} .content {overflow:auto;height:100%;} *html #content, *html #fixed, *html .fixed_scroll {position:absolute;height:100%;} *html #content {width:74%;} *html .fixed_scroll {padding-bottom:10px;}</pre> <p>Идеология разметки заключается в следующем:</p> <ol><li>web-страница визуально состоит из двух колонок позиционирование которых относительно друг друга и вертикальных границ рабочей области браузера выполнено с помощью position:fixed; - выделено синим цветом в html-коде.</li> <li>Дополнительные контейнеры, вложенные в них снабженные стилевым правилом overflow:auto; позволяют контенту находящемуся в них и превосходящему по высоте рабочую область браузера, прокручиваться по вертикали независимо друг от друга. Подсвечено зеленым.</li> <li>Появляющиеся вертикальные скроллы, портят общее впечатление, поэтому они накрыты пустыми вертикальными блоками с цветом фоновой заливки основных колонок. Две красные строки в html-коде.</li></ol> <p><a href="i/layouts/fixed/fix_gordi_01.htm">Пример</a></p> <p>О недостатках подтверждающих, что подобного рода разметка относится к классу экзотики:</p> <ul><li>Практически бесконтрольное расползание центральной колонки на все доступное место по ширине.</li> <li>Уменьшение размера окна браузера по горизонтали выталкивает ту же самую колонку за левую вертикальную границу.</li> <li>Отсутствие горизонтальной прокрутки.</li></ul> <p>В следующем <a href="i/layouts/fixed/fix_gordi_02.htm">примере</a> центральная колонка разбита на две части. Ей же указана фиксированная ширина, что несколько улучшает ситуацию по контролю над шириной оной, взамен добавляя головную боль – чем заполнить пустоту в левой части рабочей области браузера, как при изменении разрешения экрана монитора, так и в случае если диагональ монитора зашкаливает.</p> <p>Не смотря на очевидные достоинства – минимум html-кода и css, вывод напрашивается сам собой, разметка web-страницы на основе position:fixed; чистой воды экзотика и для этих целей надо смотреть в сторону position:absolute;.</p> <p>Не большое усложнение разметки в данном случае, полностью устраняет все недостатки присущие position:fixed;.</p> <p>Одна из последних <a href="http://trifler.ru/blog/comment_1277218834.html">публикаций</a> на тему и практическая реализация в <a href="http://trifler.ru/theme/design_fixedright.html">действии</a>.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1282942899.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1282942899.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1282942899.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1282942899.html">All Comments</a></div> <!-- RSS_link_to_post end --> Sat, 28 Aug 2010 04:01:39 GMT