«Резиновая» ширина колонок + эмуляция высоты
Крайне редко мне доводится верстать полностью резиновые макеты, т.е. когда требуется «резиновая» ширина не только для самой страницы, но и для всех колонок (как правило, боковые колонки на моей практике бывают фиксированной ширины).
И вот недавно такой случай попался. И это меня немножко поднапрягло =) Пытался искать в Интернете решение похожей задачи, но совсем ничего не нашел.
Задача
- Полная «резина»: и ширины страницы, и ширины 2-х колонок (контент + сайдбар).
- Необходимость эмулировать одинаковую высоту колонок. У сайдбара фон в виде серого цвета. Нужно было сделать так, чтобы серый фон всегда тянулся до футера, независимо от количества содержимого в той или другой колонке.
В моем случае было исключено применение метода padding-bottom: 32767px; margin-bottom: -32767px по той простой причине, что я верстал под WordPress, а там используются ссылки-якори, и, в результате применения данной методики, при переходе по таким ссылкам в ряде браузеров с экрана прячется все, что находится до якоря.