Question

我为我的网络应用程序制作了一个三列布局，其中两个左列形成菜单和子菜单，第三列是主视口。但是，当主视口可滚动时，即使它确实显示滚动条，第二列（div）也不可分辨。我做错了什么？

<div id="container">

<div id="top" class="clearfix">
    Header
</div>

<div id="container_menu">
    <ul id="menu">
        <li>Menu goes here</li>
    </ul>
</div>

<div id="container_submenu">
    <div id="submenu">
    Submenu goes here
        <strong>WHY WON'T THIS DIV SCROLL? (It is showing a scroll bar...)</strong><br />
        FILLER<br />
    </div>
</div>

<div id="main">
    FILLER<br />
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
    /* For IE 6/7 (trigger hasLayout) */
}
body, td, th {
}
body {
    background: #fff;
}
div#container {
    min-width: 800px;
    /*TODO*/
    width: 100%;
}
div#top {
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;
}
/* MENU */
 div#container_menu {
    background: #666;
    position: fixed;
    left: 0;
    top: 0;
    width: 180px;
    margin-right: -180px;
    height: 100%;
}
ul#menu {
    margin-top: 50px;
}
/* SUBMENU */
 div#container_submenu {
    z-index: -1;
    background: #ebeef5;
    color: #999;
    position: fixed;
    left: 180px;
    top: 0;
    width: 250px;
    height: 100%;
    margin-right: -250px;
    height: 100%;
    overflow: scroll;
}
div#submenu {
    margin-top: 50px;
}
div#main {
    margin-left:430px;
    margin-top: 50px;
}

JS Fiddle with CSS

Answer 1

z-index上的div#container_submenu为-1。 div被置于#container div（透明）之下，因此您可以看到#container_submenu div，但实际上并未定位它。使z-index为div#container_submenu 0，它将修复它。

Answer 2

它被#main div封锁了。只需删除z-index: -1即可。 http://jsfiddle.net/zephod/4xp2jj3a/

当主视口可滚动时，Div不可滚动

CSS

2 个答案: