Любителям экзотики и извращений...

Trifler Blog

28 августа 2010, 04:01

Любителям экзотики и извращений...

На простой вопрос, можно ли с помощью position:fixed; создать полноценную web-страницу - большинство продвинутых верстальщиков без особых раздумий, дадут отрицательный ответ. И будут правы.

Собственно о трудностях прямого использования position:fixed; писал не однократно, ничего не изменилось, и ждать в этом смысле каких либо подвижек не приходится, скорее всего, фиксация блоков на web-странице так и останется экзотикой.

Как иллюстрация выше сказанному пара примеров.

html-код не сложен, тоже самое относится к стилям описывающими его поведение.

<body>
  <div id="content">
   <div class="content">…</div>
  </div>

  <div id="fixed">
    <div class="content">…</div>
  </div>
  <div class="fixed_scroll"></div>
  <div class="fixed_scroll no"></div>
</body>

* {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;}

Идеология разметки заключается в следующем:

  1. web-страница визуально состоит из двух колонок позиционирование которых относительно друг друга и вертикальных границ рабочей области браузера выполнено с помощью position:fixed; - выделено синим цветом в html-коде.
  2. Дополнительные контейнеры, вложенные в них снабженные стилевым правилом overflow:auto; позволяют контенту находящемуся в них и превосходящему по высоте рабочую область браузера, прокручиваться по вертикали независимо друг от друга. Подсвечено зеленым.
  3. Появляющиеся вертикальные скроллы, портят общее впечатление, поэтому они накрыты пустыми вертикальными блоками с цветом фоновой заливки основных колонок. Две красные строки в html-коде.

Пример

О недостатках подтверждающих, что подобного рода разметка относится к классу экзотики:

  • Практически бесконтрольное расползание центральной колонки на все доступное место по ширине.
  • Уменьшение размера окна браузера по горизонтали выталкивает ту же самую колонку за левую вертикальную границу.
  • Отсутствие горизонтальной прокрутки.

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

Не смотря на очевидные достоинства – минимум html-кода и css, вывод напрашивается сам собой, разметка web-страницы на основе position:fixed; чистой воды экзотика и для этих целей надо смотреть в сторону position:absolute;.

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

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

Комментарии к этой заметке больше не принимаются.
Все заметки категории «HTML and CSS»

Рейтинг популярности - на эти заметки чаще всего ссылаются:

  1. 1277268923532 position:absolute; Ликбез
  2. 0877996995200 Вертикальное раздвигающееся меню
  3. 0865950425348 Закругленные углы - градиент, html and css
  4. 0838942916744 Hack CSS for IE8
  5. 0831563727184 display:inline-block; and display:inline;
  6. 0688630796544 Фиксированные блоки на web-странице
  7. 0643210485892 max-width и min-width в IE6. Решить за 60 секунд
  8. 0415034819082 Footer всегда внизу. Личный архив
  9. 0380826026240 position:relative;overflow:hidden;border-top; Браузеры
  10. 0292057796608 Вертикальный скролл

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

август, 2010
пн вт ср чт пт сб вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
free counters