实现这样的布局的最佳方法是什么？：
+-------+ +--------------------------------------+ +-------+
| fixed | | | | fixed |
+-------+ | fluid | +-------+
| overflow:auto; |
| |
+--------------------------------------+
当它太小而无法显示内容（图像等）时，我需要显示滚动条。
答案 0 :(得分：2)
这样的事情可以作为一个起点：
的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>
答案 1 :(得分：0)
不要在主程序段上设置宽度，并使用足够宽的边距以防止它与固定程序段重叠。
i.g。
#fixed_left { float: left, width 200px; }
#fixed_right { float: right, width 200px; }
#main { margin: 0 210px; overflow: auto; }
答案 2 :(得分：0)
在我的个人布局中，我更喜欢“绝对位置”解决方案，如下所示：
这是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>
现在我想说明两个细节：
P.S。：我测试了Firefox，Safari和Chrome上的代码，没关系