“异国情调”的CSS布局 - 左固定静态，右流体可滚动包含混合元素

Question

我遇到麻烦，要实现一种“异国情调”的布局，这种布局是某种“嵌套”布局，其中HEADER和Footer实际上是右列（或“框架”）的一部分：

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

在视觉上它应该是这样的：

所以基本上黄色区域是静态的，固定的并始终在视野中。

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

我搜索了所有主要的“css-layout-gallery”网站，但我还没有遇到过可靠的解决方案。 （大多数页面顶部都有标题）

我的主要问题是实现防弹方法，该方法适用于所有主要操作系统＆amp;浏览器（Firefox 3.6 - 6，IE 6-9，Opera，safari＆gt; Mac，Win，Linux）

现在，（正如通常预期的那样）IE总是让我很难，虽然在一些布局实验中，firefox也会给出意想不到的不同结果（例如在3.6和5之间）

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

Answer 1

如果您执行类似fiddle之类的操作，这应该可以让您与IE 6+兼容。

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;   
}

Answer 2

你尝试过这样的事吗？ （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;
}

它适用于Mac中的FF，Chrome和Opera。我现在无法在任何Windows浏览器中测试它，因此IE可能会出现问题：P无论如何，如果这样做，你仍然需要以某种方式修复左撇子和侧边栏的高度为100％。但在此之前，您可以试试这个布局。