Задача, не имеющая кошерного решения

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

Итак задача. Сделать колонки сайта одинаковыми по высоте. В минимальном случае: сайдбар и контент, зажатые между хедером и футером. Да еще сделать обводку.

Превосходный пример. Я решил вернуть в интернет архив зимнего блога окольным путем. Я не хочу ставить движок на имеющийся хостинг. Однако я не могу сделать поддомен для skisport.pp.ua (что было бы логично), поскольку домен привязан к хостингу без возможности любого шевеления налево. Бюджетное решение, ибо.

Посему архив ляжет на альтернативный домен skiing.pp.ua. Это преамбула.

Посмотрев критическим взглядом на старую вордпресс-тему зимнего блога, я понял, что в этом виде я не смогу ее использовать: она делалась на скорую руку пять лет назад, и основу ее внешности составляет набор картинок-png. Плюс туча старых косяков и заросли лишайников и мха. Описывать смысла нет. Я понял, что нужно быстро сделать все заново, не отступая от простого и в целом удачного дизайна. И отбросить все ненужное и лишнее.

Никакого растра, только сss и svg в отдельных местах. Кроме очень удачного фончика, такое сложно сделать без «точечных рисунков».

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

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

Таблицы много позволяют, в том числе сохранять высоту всех колонок на одном уровне и задавать этим колонкам обводки. Дивами такого достигнуть без изврата просто невозможно. Кроме шуток. Посему, в 2011-м, желая сохранить белую окантовку, при легком увеселении дизайна, я пошел на png. В принципе тогда это не было проблемой. Мониторы с высокой плотностью пикселей были не просто редки, их практически не было. Господствовали 1024 по ширине. Но все изменилось.

Заканчиваю. Теперь по существу.

Сделать две равноценные колонки не проблема. Берется контейнер, контейнеру задается бордер, скажем, пикселей 200 — сколько нужно для сайдбара. Сайдбар, позиционируется с отступом — left:-200px, чтобы сдвинуть его точно на полностью окрашенный бордер. Фон сайдбара прозрачный. Остальное пространство справа отдается контенту. Супер, все зашибись! А вот попробуйте сделать внутреннюю окантовку!

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

Первое решение, которое мне пришло в голову — это использовать градиентную заливку для основного контейнера. т.е. 1 пиксель белого цвета, остальное фонового.

background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 201px, rgba(0,0,0,1) 202px, rgba(0,0,0,1) 100%);

В Мозиллах отлично работает. В Хромах (-webkit-linear-gradient) ни в какую, там необходимо как минимум два-три пикселя на один градиентный стоп. Не подходит.

Пришлось использовать костыль. В виде дополнительного дива, абсолютно позиционированного, с шириной 1 пиксель, с бокс-сайзингом бордер-бокс, дабы 1 пиксель был 1 пикселем, и бордером в 1 пиксель нужного цвета, высота ставилась 100% от контейнера. Работает, чсх.

.pixel {position: absolute; height: 100%; left:0; top:0; width:1px; box-sizing: border-box; border-right: 1px solid white; z-index: 999999; }
.container {border-left: 200px solid #379eca; position: relative;}
.sidebar {float: left; width: 200px; position: relative; background: none; left: -200px; box-sizing: border-box; color: white;}

P.S. Если что, оно еще и эластичное… И, видимо, станет адаптивным поперед батька.

Короче говоря, я не стану исправлять эту тутошнюю шкуру блога (avo.org.ua), а сделаю ее заново. Это гораздо проще и приятнее, чем разгребать наслоения окаменелостей, причем изначально чужих. По сути-то основа блоговой темы — древняя чужая под названием «Либрио», которую я выбрал за приятный минимализм, но, со временем, нещадно зашлифовал. Но шлифовка это не ремонт.

P.P.S. Архив з.б. вернулся в сеть.