CSS固定流体(溢出:auto)-fixed layout

Question

实现这样布局的最佳方式是什么？:

+-------+  +--------------------------------------+ +-------+
| fixed |  |                                      | | fixed |
+-------+  |               fluid                  | +-------+
           |           overflow:auto;             |        
           |                                      |
           +--------------------------------------+

当滚动条太小而无法显示内容(图像等)时，我需要滚动条出现。

Answer 1

像这样的东西可以作为起点:

http://jsfiddle.net/8P4MX/1/

CSS:

body{
        padding     :0px;
        margin      :0px;
        text-align  :center;
    }

    div#container{
        height      : 100%;
        position    : relative;
        width       : 100%;
    }

    div#contents{
        background-color:#CCCCCC;
        border      : #000000 1px solid;
        clear       : none; 
        min-height  : 500px;
        margin-left : auto;
        margin-right: auto;
        overflow    : auto;
        position    : relative;
    }

    div.float{
        background-color:#CCCCCC;
        border      : #000000 1px solid;
        height      : 300px;
        position    : relative;
        width       : 150px;
    }

    div#left{
        float:left;
    }

    div#right{
        float:right;
    }

标记:

<div id="container">
    <div id="left" class="float">left</div>
    <div id="right" class="float">right</div>
    <div id="contents">fluid</div>
</div>