Question

我想使用position:fixed修复左侧div。因此，当我滚动页面时，只有正确的div应该移动，我尝试使用position:fixed离开div但是它漂浮在右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必须有宽度：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%;
}

<强> DEMO

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

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

5 个答案: