CSS fixed-fluid(overflow:auto)-fixed布局

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>

Answer 2

不要在主块上设置宽度，并使用足够宽的边距，以防止它与固定的块重叠。

i.g.

#fixed_left { float: left, width 200px; }
#fixed_right { float: right, width 200px; }
#main { margin: 0 210px; overflow: auto; }

Answer 3

在我的个人布局中，我更喜欢“绝对位置”解决方案，如下所示：

这是css代码：

#container {
   position: relative;
}

#left {
   background-color: #FF0000;
   width: 200px;
   position: absolute;
   left: 0;
}

#center {
   background-color: #00FF00;
   margin: 0 200px 0 200px;
   position: absolute;
   overflow: auto;
}

#right {
   background-color: #0000FF;
   width: 200px;
   position: absolute;
   right: 0;
}

这是html代码：

<div id="container">
    <div id="center">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet libero non ligula fringilla sit amet adipiscing turpis commodo. Nullam semper orci nec lorem sodales ut ultrices tellus rutrum. Cras nisl metus, malesuada vehicula vulputate ac, ultricies eget ipsum. Donec vehicula leo nec erat placerat eget sollicitudin dui facilisis. Fusce leo ipsum, bibendum at mollis a, vestibulum sollicitudin ante. Nulla lacinia egestas leo, sed vestibulum quam laoreet sed. Cras tempor odio et risus volutpat ultrices. Curabitur in eros nec lectus dignissim adipiscing. Nunc ut dignissim augue. Nam neque leo, eleifend nec volutpat eu, convallis ut mauris. Pellentesque id nibh at enim iaculis tincidunt. Duis et nibh magna, ut fringilla nisi. Nulla volutpat, lorem ac aliquam rhoncus, erat tortor pretium augue, a rutrum orci ante vel tellus. Mauris vestibulum, leo in fermentum venenatis, dolor dolor egestas libero, cursus vestibulum lorem nisl eget neque.
        </p>
        <p>
            Suspendisse volutpat aliquet nulla non fermentum. Nam blandit, dolor eget euismod imperdiet, tellus arcu fringilla libero, et imperdiet quam est at ipsum. Donec tristique nulla nec libero ullamcorper sit amet suscipit est facilisis. Etiam egestas blandit justo a auctor. Duis sollicitudin vehicula diam, eget fermentum urna sodales at. Sed a hendrerit justo. Sed eu placerat erat. Donec sagittis suscipit ipsum, eu facilisis dolor placerat et. Nunc augue nisl, pulvinar id aliquet at, dictum in augue. Aliquam a neque vitae mi viverra viverra. In hac habitasse platea dictumst. Proin ac nibh purus. Morbi auctor sollicitudin lectus sit amet gravida. Cras lorem sapien, ullamcorper vitae lobortis non, laoreet non ante. Suspendisse quis erat leo.
        </p>
        <p>
            Maecenas lectus felis, lacinia eu luctus vel, sodales a nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam enim ipsum, viverra ac aliquam eget, lobortis et turpis. Vivamus porttitor aliquet metus id gravida. Nullam vel tincidunt turpis. Vivamus scelerisque vestibulum venenatis. Proin tempus fringilla adipiscing. Sed in metus vitae nibh mattis faucibus. Cras vitae purus eget tellus fermentum imperdiet. Proin at diam risus. Curabitur hendrerit nulla nec libero ullamcorper ultrices. Sed pretium blandit lectus non blandit. Phasellus ac ante et libero vulputate aliquet. Donec egestas viverra ligula, eget vestibulum magna mollis in. Praesent et metus nulla. Sed nec diam tristique urna consequat elementum. Quisque vel orci eget urna consectetur malesuada.
        </p>
    </div>          
    <div id="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet libero non ligula fringilla sit amet adipiscing turpis commodo. Nullam semper orci nec lorem sodales ut ultrices tellus rutrum. Cras nisl metus, malesuada vehicula vulputate ac, ultricies eget ipsum. Donec vehicula leo nec erat placerat eget sollicitudin dui facilisis. Fusce leo ipsum, bibendum at mollis a, vestibulum sollicitudin ante. Nulla lacinia egestas leo, sed vestibulum quam laoreet sed. Cras tempor odio et risus volutpat ultrices. Curabitur in eros nec lectus dignissim adipiscing. Nunc ut dignissim augue. Nam neque leo, eleifend nec volutpat eu, convallis ut mauris. Pellentesque id nibh at enim iaculis tincidunt. Duis et nibh magna, ut fringilla nisi. Nulla volutpat, lorem ac aliquam rhoncus, erat tortor pretium augue, a rutrum orci ante vel tellus. Mauris vestibulum, leo in fermentum venenatis, dolor dolor egestas libero, cursus vestibulum lorem nisl eget neque.
    </div>
    <div id="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet libero non ligula fringilla sit amet adipiscing turpis commodo. Nullam semper orci nec lorem sodales ut ultrices tellus rutrum. Cras nisl metus, malesuada vehicula vulputate ac, ultricies eget ipsum. Donec vehicula leo nec erat placerat eget sollicitudin dui facilisis. Fusce leo ipsum, bibendum at mollis a, vestibulum sollicitudin ante. Nulla lacinia egestas leo, sed vestibulum quam laoreet sed. Cras tempor odio et risus volutpat ultrices. Curabitur in eros nec lectus dignissim adipiscing. Nunc ut dignissim augue. Nam neque leo, eleifend nec volutpat eu, convallis ut mauris. Pellentesque id nibh at enim iaculis tincidunt. Duis et nibh magna, ut fringilla nisi. Nulla volutpat, lorem ac aliquam rhoncus, erat tortor pretium augue, a rutrum orci ante vel tellus. Mauris vestibulum, leo in fermentum venenatis, dolor dolor egestas libero, cursus vestibulum lorem nisl eget neque.
    </div>
</div>

现在，我想指出两个细节：

中心内容目录(#

1. )必须在左右菜单之前
2. 内容目录(#

)必须比左右菜单长。否则，它可能会与潜在的页脚重叠。为了避免这种情况，您必须在potenzial footer中使用'clear:both‘

附言:我在Firefox、Safari和Chrome上测试了代码，结果还可以