css左右列固定

Question

即时通讯工作在3列网页。我想冻结左边的右边栏。我尝试设置位置：首先固定在左列，但其他所有div只是碰撞到左侧。

任何想法？

Answer 1

position:fixed取元件从元件的正常 “流” 的。我通常通过将中间列的margin-left设置为等于左列的宽度加上所需的排水沟来避开这种情况。例如，如果左栏为250像素，排水槽为25像素，则中间栏的margin-left为275像素。

示例代码（这保持在宽度中间列液）：

#wrapper { position: relative; min-width: 800px; max-width: 1000px; margin-left: auto; margin-right: auto; } 
#left-col { position: absolute; top: 0; left: 0; width: 250px; } 
#right-col { position: absolute; top: 0; right: 0; width: 250px; } 
#middle-col { position: relative; margin-left: 275px; min-width: 250px; max-width: 450px; } 

<div id="wrapper"> 
    <div id="left-col"> left </div> 
    <div id="middle-col"> middle </div> 
    <div id="right-col"> right </div> 
</div> 

Answer 2

您需要在中心div上设置边距以保留其他两个边距。

这里是一个的jsfiddle：http://jsfiddle.net/pfxxL/

#left { 
    width: 100px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background: red; 
} 

#right { 
    width: 100px; 
    position: fixed; 
    top: 0; 
    right: 0; 
    background: blue; 
} 

#center { 
    margin-left: 100px; 
    margin-right: 100px; 
    height: 750px; 
    background: green; 
} 

<div id="left"> 
    left left<br/> 
    left left<br/> 
    left left<br/> 
</div> 
<div id="center"> 
    center 
</div> 
<div id="right"> 
    right right<br/> 
    right right<br/> 
    right right<br/> 
</div>