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

Question

我很难实现“异国情调”布局，这是一种“嵌套”布局，其中页眉和页脚实际上是正确列(或“框架”)的一部分：

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

从视觉上看应该是这样的：

​

​

因此，基本上，黄色区域是静态的，固定的，而且总是在视野中。

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

我已经搜索了所有的主要“css布局-画廊”网站，但我还没有遇到一个可靠的解决方案。(大多数页面的顶部都有标题)

我的主要问题是实现一个防弹方法，该方法将在所有主要操作系统和浏览器(Firefox3.6-6，IE6-9，Opera，safari > Mac，Win，Linux)上工作。

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

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

Answer 1

如果您执行类似于此6+的操作，这将使您接近IE 小提琴兼容性。

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

你试过像这样的东西吗？(小提琴)我认为这是你所需要的。

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中运行。我现在无法在任何Windows浏览器上测试它，所以IE可能是这里的一个问题:无论如何，如果这起作用，您仍然需要修复左醇和侧边栏的高度为100%。但在此之前，您可以尝试一下这个布局。