В нашей душе может быть великий огонь. Но никто может так и не прийти погреться у него, потому что проходящие видят только струйку дыма.
Винсент Ван Гог

Высота макета

Фиксированные блоки (колонки) и сто процентная высота страницы, как оказалось совершенно не совместимые вещи.

Наличие вертикального скролла обусловлено тем, что область контента и фиксированная колонка позиционируются по-разному.

Отсчет от вертикальных границ для области контента осуществляется в рамках контейнера с классом wrap.

Для фиксированной колонки отсчет идет от body.

Это накладывает определенные ограничения на высоту макета.

В частности, отсутствие для класса wrap указания height:100%; приведет к тому, что при минимуме информации в области контента, позиционирование соответствующих блоков (колонок) будет нарушено.

Они получат сдвиг на ширину отсутствующей вертикальной прокрутки.

Как только в области контента появятся блоки или текст превышающий по высоте видимую область окна браузера все вернется в норму.

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

Контроль ширины макета

Много времени было потрачено, на поиски решений связанных с желанием получить простыми средствами возможность использования привычной всем связки margin:0 auto; и min/max-width; для центрирования макета при разных диагоналях и разрешениях экрана монитора.

Были опробованы различные варианты.

Проблема усугубляется еще и тем, что для размещения колонок относительно друг друга, в некоторых случаях использовались проценты.

Как вы понимаете, проценты это настоящий бич верстальщика, без указания индивидуальных стилевых правил, к сожалению, в этом случае просто не обойтись.

Решение, возможно, не совсем устраивающее было найдено.

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

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

Как альтернатива, возможно привлечение JavaScript, тогда все верстается с использованим пикселей, что снимает проблему люфта. Скрипт отдает соответствующие стили в зависимости от разрешения.

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

Дополнитнльные файлы стилей, пусть и минимального размера, под каждое разрешение могут стать сущей головной болью, ведь все стандартные и не стандартные (ноутбуки) разрешения, не просто даже перечислить.

С другой стороны, наличие скриптов на web-странице давно уже стало настолько привычным, что вопрос, есть они или нет, даже не подлежит обсуждению.

Оставить комментарий.