Дискретно-резиновая верстка без JS

Задача (можно считать её спортивно-теоретической) состоит в том, чтобы сверстать резиновую страницу, растягивающуюся на всю ширину окна. Но не плавно, а дискретно. К примеру, с шагом 50px.

То есть при ширине клиентской области окна браузера 820px -> ширина контейнера body должна быть 800px. Растягиваем окно до 830, 840, 845, 848px… body остается неизменным, излишки уходят в поля по бокам. Но при 850 ступенчато прыгает до 850. И так далее: 900, 950, 1000…
Аналогично в обратную сторону — уже при ширине окна 849px размер body должен стать 800px.

Понятно, что это можно обрабатывать скриптами. А на чистом CSS/HTML? :)
Any ideas?



UPD1
Относительно изящным решением представляются медиа-запросы: htmlbook.ru/css/value/media
Можно директивно прописать ширину body для всех возможных ширин экрана с нужным шагом.
@media screen and (max-width: 799px) {
body { width: 750px; }
}
@media screen and (max-width: 849px) {
body { width: 800px; }
}
@media screen and (max-width: 899px) {
body { width: 850px; }
}
...

Недостатки: громоздко (таких повторов будет несколько десятков), неудобно модифицировать, ограниченная поддержка браузерами. Но это самое естественное, «человеческое» решение.

А если пофантазировать в сторону маньяческих вариантов, то возможно получится как-то через вложенные float-блоки, которые дадут автоподгонку ширины?..

UPD2
Приведу конкретный пример, зачем это может быть нужно.
На странице есть большая числовая таблица со столбцами шириной в те самые 50px. Столбцов очень много, так что таблица гарантированно не умещается на большинстве мониторов. То есть прокрутка в том или ином виде будет непременно.
Но характер данных таков, что значимость столбцов падает слева направо — и несколькими правыми столбцами в принципе можно жертвовать; а если они и будут нужны пользователю — доскроллит.
Ну и у дизайнера возникла мысль всегда показывать только целые столбцы, без обрезков.
  • Вопрос задан
  • 3337 просмотров
Пригласить эксперта
Ответы на вопрос 4
zzeneg
@zzeneg
Я не гуру веб-дизайна, но разве можно получить ширину экрана клиента без JS? И почему нельзя его использовать?
Ответ написан
ertaquo
@ertaquo
С jQuery делается довольно просто:
$(window).resize(function(){
  $('body').width(Math.min(800, parseInt(($(window).width() - 800) / 50) * 50));
});
Ответ написан
lashtal
@lashtal
Посмотрите техногрет — борьба с прыгающими блоками v3.
На 23:00 виден побочный эффект от этого метода — дискретный ресайз контента.
Ответ написан
Tomasina
@Tomasina
Инженер-разработчик
такой вариант не подойдет?
Дискретно не по сетке, а поблочно.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы