“异国情调”的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”网站，但我还没有遇到一个可靠的解决方案。 （大多数都有在页面顶部的标题）

我的主要问题是实现防弹方法，将上所有主要的操作系统&浏览器工作（火狐3.6 - 6，IE 6-9，歌剧，Safari浏览器> Mac，Win，Linux）

现在，（通常预期）IE总是给我一个很难的时间，尽管在一些布局实验中，Firefox也给出了意想不到的不同结果（在3.6和5例如）

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

Answer 1

你试过类似的东西吗？ （fiddle）我认为这几乎是你所需要的。

HTLM：

<div id="left-col">left col</div> 

<div id="container"> 

    <div id="header">header</div> 
    <div id="main"> 
     <div id="sidebar">sidebar</div> 
     main 
    </div> 
    <div id="footer">footer</div> 
</div> 

CSS：

#left-col { 
    width: 50px; 
    position: fixed; 
    background: yellow; 
    left: 0; 
    top: 0; 
} 
#container { 
    margin-left: 50px; 
    background: black; 
} 
#header { 
    background: green; 
} 
#main { 
    background: blue; 
    position: relative; 
} 
#sidebar { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50px; 
    background: pink; 
} 
#footer { 
    background: red; 
} 

它的工作在FF，Chrome和Opera在Mac。我现在无法在任何Windows浏览器中测试它，所以IE可能会成为一个问题：P无论如何，如果这种方法有效，您仍然需要修正左侧栏和侧栏的高度，以便以某种方式100％。但在此之前，您可以试试这个布局。

Answer 2

这应该让你关闭，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; 
}