如何使div位置固定而不浮動

Question

我想使用position:fixed修復左div。 因此，當我滾動頁面時，只有右div可以移動，我嘗試使用position:fixed到left div，但它浮動在right div內容上。 如何使左div固定到頁面而不浮動在右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;
}

小提琴：

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;
}

Answer 2

嘗試放置以下內容，只需將全角類添加到body標簽即可，以隱藏左側面板並設置右側全角。

.full-width #left {
    display: none;
}

.full-width #right {
    width: 100%;
}

#left {
    width: 25%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: red;
}

#right {
    width: 75%;
    position: relative;
    left: 25%;
}

Answer 3

本質上，您在左div上設置了position:fixed具有固定寬度（即，這里width:250px; ），並將寬度作為邊距添加到右div，即margin-left:250px; 。
參見jsfiddle或直接查看CSS代碼：

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

#right {               
    vertical-align:middle; 
    text-align:left;
    background-color:#ccc;
    margin-left:250px;
}

Answer 4

在您的Javascript中，檢查#left div是否可見。

var leftDiv = document.querySelector("#left"),
    rightDiv = document.querySelector("#right");
if(leftDiv.getBoundingClientRect().width === 0 && leftDiv.getBoundingClientRect().height === 0) {
     rightDiv.classList.add("fullWidth");
} else {
     rightDiv.classList.remove("fullWidth");
}

現在默認在您的CSS中：

#right {
   width: calc(100% - 250px);
}

對於fullWidth：

#right.fullWidth {
   width: 100%;
}

演示

Answer 5

向#left添加一個類以獲取隱藏狀態。

/* Left panel visible */
#right {
    box-sizing: border-box;
    width: 100%;
    padding-left: 250px;
}

/* Left panel hidden */
#left.hidden {
    display: none;
}
#left.hidden + #right {
    padding-left: 0;
}