Гибкие фоны полной ширины с HTML, CSS и 960.gs

Question

Я работаю над сборкой внешнего интерфейса набора шаблонов HTML с хитрым элементом в дизайне.

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

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

Я пытался реализовать следующее решение из трюков CSS, но оно вызывает различные проблемы в разных версиях IE.

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

Любые другие предложения о том, как подойти к этому?

Answer 1

Это может быть сделано с чистыми css bu , а не очищающими поплавками.По сути, идея состоит в том, чтобы иметь div, который оборачивает вашу навигацию и контент, и перемещает контент.Обертка должна не иметь overflow:hidden.Поплавок очищается в нижнем колонтитуле.

Fiddle .

Проверено FF4, Opera 11.50 и Chrome 12. У меня нет IE под рукой, но он должен нормально работать.