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

我想使用

位置：fixed

修复左div。因此，当我滚动页面时，只有右div应该移动，我尝试使用

position:fixed

到left div，但它在右div内容上浮动。如何使左div固定到页面而不浮动到右div上

CSS:

小提琴：

---

右div必须有宽度：100%，因为有些页面左div是隐藏的，要覆盖页面右div必须有100%

尝试放置以下内容，只需将类全宽添加到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%;
}

试试这个：

我用了这个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;
}

---

基本上，您可以在左div上设置固定宽度的

位置：fixed

（即此处

宽度：250px；

），并将宽度作为边距添加到右div，即

边距左：250px

请参阅或直接查看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;
}

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

对于全宽：

#right.fullWidth {
   width: 100%;
}

将类添加到
#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的宽度，或者您可以使用
z-index
您可以使用CSS calc（）：
#right{width:calc（100%-250px}
@Pogrindis right div必须具有100%的宽度，因为在某些页面中，左div是隐藏的，所以右div应该覆盖整个页面。请注意，
calc
可能是一个更好的选择，并且非常兼容：右div必须具有100%的宽度，因为在某些页面中，左div是隐藏的，所以右div应该覆盖整个页面。编辑我的答案以适合您的使用情况。您必须使用一些javascript才能应用CSS类使页面全宽。您可以提供JSFIDLE链接。它显示白色空白的左边距。如果我删除左div…如果您希望左侧面板显示在id为main的div中，请删除全宽类。我无法传递左边距因为有些页面没有left div，所以如果我保留从左到右的边距div，那么它会在左侧留下空白。如果页面的左侧没有列，您可以在主div中添加一个css类
一列页面
，然后添加一个css规则
。一列页面#右{margin left:0px；}
。如果我删除了左div，那么它将提供左侧边距。在某些页面中，左div是隐藏的，因此此时右div应该覆盖100%是的，在这种情况下它也会工作，您需要做的就是隐藏“leftContainer”div而不是左div。您还可以像这样交换ID和css
/* 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;
}