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

【问题标题】：How to make div position fixed without floating如何使div位置固定而不浮动
【发布时间】：2015-04-11 13:06:22
【问题描述】：

我想使用 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 必须有 width:100% 因为，有些页面左 div 被隐藏，要覆盖页面右 div 必须有 100%。

【问题讨论】：

你已经修复了，它相对于窗口，所以没有考虑其他 div .. 你需要调整另一个右侧 div 的宽度，或者你可以玩@987654326 @
你可以使用 CSS calc() : #right {width: calc(100% - 250px}.
@Pogrindis 右 div 必须有 100% 的宽度，因为在某些页面中左 div 是隐藏的，所以右 div 应该覆盖整个页面
很公平，还请注意calc then 可能是一个更好的选择并且非常兼容：caniuse.com/#feat=calc

标签： javascript html css

【解决方案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;
}

【讨论】：

如果我删除了左边的 div，那么它会给左边的边距。在某些页面中，左边的 div 是隐藏的，所以当时右边的 div 应该覆盖 100%
是的，在这种情况下它也可以工作，你需要做的就是隐藏“leftContainer”div而不是left div你也可以像jsfiddle.net/0k698ga2/2一样交换id和css

【解决方案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%;
}

【讨论】：

右 div 必须有 100% 的宽度，因为在某些页面中左 div 是隐藏的，所以右 div 应该覆盖整个页面。
编辑了我的答案以适合您的用例。您将不得不使用一些 javascript 来应用 CSS 类来使页面全宽。
你能提供 jsfiddle 链接吗？它显示白色空白左边距。如果我删除左 div ..
jsfiddle.net/0k698ga2/3。如果您希望左侧面板出现在 id 为 main 的 div 中，请删除全角类。

【解决方案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;
}

【讨论】：

我不能通过margin-left，因为有些页面没有left div，所以如果我保持margin-left to right div，那么它会在左侧留出空白空间。
如果页面左侧没有列，您可以在主 div 中添加 css 类 one-column-page，然后添加 css 规则 .one-column-page #right { margin-left:0px; }。

【解决方案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);
}

对于全宽：

#right.fullWidth {
   width: 100%;
}

DEMO

【讨论】：

【解决方案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;
}

【讨论】：