Как реализовать частично гибкий макет экрана с сеткой?

Question

Я пытаюсь реализовать следующую компоновку экрана, используя сетку CSS (BluePrint), но безуспешно:

Как этого добиться с помощью сетки? У кого-нибудь есть пример кода CSS / HTML, которым можно поделиться? Спасибо.

PS: Причина, по которой я хочу использовать каркас, состоит в том, чтобы убедиться, что этот макет работает во всех браузерах (любой безопасный каркас в порядке, он не обязательно должен быть BluePrint) .

Answer 1

YAML должен быть в состоянии: http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html

или, возможно, Fluid 960?http://designinfluences.com/fluid960gs/

Answer 2

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

Я нашел длинное решение с использованием некоторого Javascript. Сначала я определяю различные ячейки моего экрана с помощью div в моем HTML. Затем я получаю ширину и высоту документа и устанавливаю ширину и высоту ячеек, используя JQuery. Я начинаю с фиксированных значений, затем простых производных, затем сложных производных.

Для проблемы с ползунком я использовал объясненный трюк здесь . Я регулирую размер центрального столбца в соответствии с наличием ползунка, который сам зависит от высоты «центральной» ячейки, которая сама зависит от ширины экрана.