我正在开发一组 HTML 模板的前端构建，其中设计中有一个棘手的元素。
正如您从屏幕截图中看到的那样，主导航是一个垂直列表，其中包含嵌套的链接列表，其中存在子页面和部分，因此需要菜单的高度灵活。
该设计在背景中有一组全宽条纹 - 标题、中心和从主导航下方向下。事实证明，这很难集成，因为浏览器全宽的深蓝色背景需要灵活并随着主导航高度的变化而变化。
我已经尝试从 CSS 技巧中实现以下解决方案，但它在各种版本的 IE 中引起了各种问题。
我正在考虑创建一个空白的绝对定位容器，通过 JavaScript 确定主导航的高度来设置它的高度，但我担心页面加载时布局中的跳跃以及跨浏览器兼容性。
关于如何解决这个问题的任何其他建议？