Css 固定左导航滚动水平

如果我调整窗口的大小并使用水平滚动条content div，编辑器会在导航条的后面重叠，我会在左侧设置一个垂直导航条，位置设置为fixed

图片：

代码：

我如何避免这种情况

---

提前感谢。

您的菜单有一个指定的位置，但父div没有。因此父div不知道应该定位在何处，但菜单希望相对于父div进行固定或定位

---

您应该做的是将父div至少指定为页面的全宽，并给它一个位置或向左或向右浮动。这将意味着其中的任何div都将相应地进行定位。

实际上，为了使任何定位真正生效，它需要位置值，因为默认值是

自动

，而不是

0

。请尝试以下操作：

#left-menu {
    position: fixed;
    left: 0; /* <- you need a value! */
    top: 0; /* <- you need a value! */
    /* Also note a float is not necessary for a fixed or absolute element */
    width: 180px;
    background: #000;
    height: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}

这里有一些内容可以看到它被推送
***页脚***

通过在左侧添加一个填充，将内容推到菜单区域之外？@something这里我刚刚替换了

左边距：200px带
左填充：200px但没有区别，还有其他想法吗？你能发布一些html吗？此外，您的所见即所得编辑器是否具有绝对位置？如果是这样，请返回到
左边距
，并将
位置：相对
添加到包装器中，以使绝对元素在内容框中而不是在文档中发挥作用。@something这里有HTML。Wysiwyg编辑器位于内容包装器div之间，没有
position:absolute
，我刚刚按照您的建议添加了
position:relative
，但我得到了相同的结果。问题将是文本编辑器中包含的内容以及如何定位。实际上，问题在于固定元素没有设置位置。当您添加
top:0时，它可以正常工作；左：0。我刚刚尝试了你的建议，但结果相同。可能是TinyMCE引起了问题吗？不应该是。tinymce在您的内容分区中吗？tinymce可能导致此失败的唯一方法是，如果它本身使用了我高度怀疑的
position:absolute
。请检查此JSFIDLE：在我的内容中，如果您调整此窗口的大小，我将在表单中显示tinymce水平滚动条。我怎样才能避免这种情况？我现在正在调试你的整个网站吗？检查你的风格-你的
文本区域有一个
宽度：100%
，但是你的
输入没有，所以最终你的
输入将大于屏幕并创建一个滚动条。不，这不是我的意图。在我的css文件中，我给了我的输入字段一个自定义的宽度，这可能是造成问题的原因。我刚刚在内容包装器中添加了
overflow-x:hidden
，在这个水平滚动条不可见之后，问题就不再存在了。
/* menu */

#left-menu {
    position: fixed;
    float: left;
    width: 180px;
    background: #000;
    height: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}

/* menu style */

#left-menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#left-menu li {
    text-indent: 15px;
    line-height: 40px;
}

#left-menu li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

#left-menu li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

/* menu title style */ 

#left-menu ul .menu-title {
    line-height: 45px;
}

#left-menu ul .menu-title { 
    height: 50px;
    font-size: 18px;
}

#left-menu ul .menu-title {
    color: #999999;
}

#left-menu ul .menu-title a:hover {
    color: #fff;
    background: none;
}

/* content | header | footer */

#content-wrapper {
    margin-left: 200px;
    padding-top: 12px;
}

#header {

}

#footer {
    position: absolute;
    bottom: 0;
    right:0;
    padding-right: 20px;
    padding-bottom: 10px;
}

#left-menu {
    position: fixed;
    left: 0; /* <- you need a value! */
    top: 0; /* <- you need a value! */
    /* Also note a float is not necessary for a fixed or absolute element */
    width: 180px;
    background: #000;
    height: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}