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

Question

[dom1n1k]

Задача (можно считать её спортивно-теоретической) состоит в том, чтобы сверстать резиновую страницу, растягивающуюся на всю ширину окна. Но не плавно, а дискретно. К примеру, с шагом 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. Столбцов очень много, так что таблица гарантированно не умещается на большинстве мониторов. То есть прокрутка в том или ином виде будет непременно.
Но характер данных таков, что значимость столбцов падает слева направо — и несколькими правыми столбцами в принципе можно жертвовать; а если они и будут нужны пользователю — доскроллит.
Ну и у дизайнера возникла мысль всегда показывать только целые столбцы, без обрезков.

Answer 1

[zzeneg]

Я не гуру веб-дизайна, но разве можно получить ширину экрана клиента без JS? И почему нельзя его использовать?

Comments

[dom1n1k]

Численно — да, нельзя.
Но в верстке есть разные трюки, когда нужные размеры получаются косвенными методами.
У меня в голове бродят кой-какие мысли, но пока в конкретное кроссбраузерное решение они не выстраиваются.

Насчет нельзя использовать JS — ну не то чтобы прямо совсем нельзя, но не хочется, неизящно. Я же написал, что задачу можно считать спортивной.

Answer 2

[ertaquo]

С jQuery делается довольно просто:

$(window).resize(function(){
  $('body').width(Math.min(800, parseInt(($(window).width() - 800) / 50) * 50));
});

Comments

[ertaquo]

Пардон, ошибся в логике с недосыпа:

$(window).resize(function(){
  $('body').width(Math.max(800, parseInt($(window).width() / 50) * 50));
});

Вариант без jQuery:

window.onresize = function(){
  document.body.style.width = Math.max(800, parseInt(window.innerWidth / 50) * 50) + 'px';
};

[dom1n1k]

Да, это понятно.
Проблема только в том, что любое серьезное скриптовое изменение макета, повершенное на onResize, обычно адски тормозит, дергается и мерцает (особенно в IE).

[ertaquo]

На чистом CSS универсального решения вроде бы нет.

Answer 3

[lashtal]

Посмотрите техногрет — борьба с прыгающими блоками v3.
На 23:00 виден побочный эффект от этого метода — дискретный ресайз контента.

Comments

[dom1n1k]

Да-да, я знаю про Чикуёнка и его метод, и тоже вспоминал о них.
Но в данном случае способ не подходит, поскольку он эксплуатирует багофичу IE округлять размеры блоков до целых пикселов. Тогда мы ширину экрана делим на 50 частей, округляем, обратно умножаем на 50 — и получаем то, что нужно. Но это только в IE.
FF и WebKit при расчетах используют дробные, неокругленные значения. Поэтому они посчитают все «правильно», и наш финт ушами не пройдёт.
В Опере будет своя проблема: она округляет (точнее даже не округляет, а тупо отбрасывает дробную часть) проценты. И там (в общем случае) тоже ничего работать не будет.

А направление мысли да, заманчивое.

[lashtal]

В вебкитах это как раз работает — обратите внимание там именно сафари показывается. В хроме тоже все ок. А вот в ие9 и фф уже все плавно.

Answer 4

[Дмитрий]

такой вариант не подойдет?
Дискретно не по сетке, а поблочно.