css - "exotic"css 布局 - 左侧固定静态，右侧流体滚动包含混合元素

Question

我很难实现相当“奇特”的布局，这是一种“嵌套”布局，其中 HEADER 和 Footer 实际上是右列(或“框架”)的一部分:

- Left column - Fixed,Static
- Right column - Fluid/liquid/scrollable
--- Header - fixed 
--- left/main fluid/liquid
--- Right/sidebar - fixed

视觉上应该是这样的:

所以基本上黄色区域是静态的、固定的并且始终可见。

绿色框架是可滚动的，它包含页眉、页脚和侧边栏。

我搜索了所有主要的“css-layout-galleries”站点，但我还没有遇到可靠的解决方案。 (大多数在页面顶部有标题)

我的主要问题是实现一种防弹方法，该方法适用于所有主要操作系统和浏览器(Firefox 3.6 - 6、IE 6-9、Opera、safari > Mac、Win、Linux)

现在，(正如通常预期的那样)IE 总是给我带来困难，尽管在一些布局实验中，firefox 也给出了意想不到的不同结果(例如在 Vr. 3.6 和 5 之间)

我希望有人能指出我正确的方向。

Answer 1

这应该让你接近，如果你做这样的事情与 IE 6+ 兼容 fiddle .

HTML:

<div class="outer">
  <div class="side">
    Side content. Fixed width. Floats left with a negative margin.
  </div>
  <div class="main">
    Main content...fills the rest of the width (fluid)
  </div>
</div>

CSS:

div.outer {
    margin-left: 100px;
    background: red;
}

div.outer div.side {
    display: inline; /* for IE 6 */
    float: left;
    width: 90px;
    margin-left: -100px;
    background: yellow;
}

div.outer div.main {
    min-height: 200px;   
}