修复左侧导航水平滚动

Question

我左侧有一个垂直导航栏，其位置设置为固定，如果我调整窗口大小并使用水平滚动条内容div落后并且编辑器重叠导航栏。

图像：

代码：

/* page.php */

<?php require(ABSPATH . 'header.php'); ?>

some content ...

<?php require(ABSPATH . 'footer.php'); ?>

/* header.php */

<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />

<div id="header">
</div>

<?php require(ABSPATH . 'menu.php'); ?>

<div id="content-wrapper">

/* menu.php */

<div id="left-menu">
    <ul>
        <li class="menu-title">
            <a href="#">Title</a>
        </li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</div>

/* footer.php */

</div><!-- close content wrapper -->

<div id="footer">
***FOOTER***
</div> 

CSS：

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

我该如何避免这种情况？

提前致谢。

Answer 1

您的菜单分配了一个位置，但父div没有。所以父div不知道应该在哪里定位，但是菜单想要相对于父div固定或定位。

你应该做的是将父div至少分配给页面的整个宽度，并给它一个位置或向左或向右浮动。这将意味着里面的任何div将相应地定位。

Answer 2

实际上，为了使任何定位产生实际影响，它需要位置值，因为默认值为auto，而不是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;
}

继承人的工作实施：

/* menu */

#left-menu {
    position: fixed;
    left: 0;
    top: 0;
    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;
}

<div id="header">
</div>

<div id="content-wrapper">

<div id="left-menu">
    <ul>
        <li class="menu-title">
            <a href="#">Title</a>
        </li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</div>
Heres some content to see it gets pushed
</div><!-- close content wrapper -->

<div id="footer">
***FOOTER***
</div>