javascript - 如何使div位置固定而不 float

Question

我想使用 position:fixed 固定左边的 div。因此，当我滚动页面时，只有右边的 div 应该移动，我尝试使用 position:fixed 到左边的 div，但它漂浮在右边的 div 内容上。如何让左边的 div 固定在页面上而不 float 在右边的 div 上？

CSS:

#main{width:100%;display:table;table-layout:fixed;border:1px solid red;position:relative; }
ul{list-style:none;padding:0;margin:0;overflow-y:scroll;height:100%;}
#left {               
    display: table-cell;
    width:250px; 
    // min-width:100px;
    vertical-align:middle; 
    text-align:left;
    background:red;
    }

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
    text-align:left;
    background-color:#ccc;
}

fiddle :

http://jsfiddle.net/0k698ga2/1/

右边的div 必须有width:100% 因为有些页面左边的div 被隐藏了，要覆盖页面右边的div 必须有100%。

Answer 1

试试这个: http://jsfiddle.net/0k698ga2/2/

我用了这段CSS。希望对您有所帮助。

#main{
    width:100%;
    display:table;
    //table-layout:fixed;
    border:1px solid red;
    position:relative; 
}
ul{
    list-style:none;
    padding:0;margin:0;
//    overflow-y:scroll;
    height:100%;
}
#left {               
    display: table-cell;
    width:250px; 
    position:fixed;
    // min-width:100px;
    vertical-align:middle; 
    text-align:left;
    background:red;
}

.leftContainer {
    position:relative;
    width:250px;
}

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
    text-align:left;
    background-color:#ccc;
}