灵活的全宽背景，HTML，CSS和960.gs

Question

我正在设计一组HTML模板的前端版本，并在设计中使用了一些棘手的元素。

正如您将从screengrab中看到的那样，主导航是一个垂直列表，其中包含嵌套的链接列表，其中存在子页面和部分，因此要求菜单的高度灵活。

该设计在背景中有一组全宽条纹 - 标题，中心和主导航下方。这对于深蓝色背景进行整合是非常棘手的，因为深蓝色背景需要灵活的整个宽度，并且随着主导航高度的变化而变化。

我尝试过从CSS技巧中实现以下解决方案，但它在各种版本的IE中引起了各种问题。

我正在考虑创建一个空白的绝对定位容器，通过JavaScript确定主导航的高度来设置它的高度，但我担心在页面加载时跳转布局并再次跨浏览器兼容性。

关于如何处理此问题的任何其他建议？

Answer 1

可以使用纯css bu 而不是清除浮动。基本上，我们的想法是拥有一个包含导航和内容的div，并浮动内容。包装器不有overflow:hidden。浮动在页脚中清除。

Fiddle

经过测试的FF4，Opera 11.50和Chrome 12.手头没有IE，但它应该可以正常工作。