Question

好吧，所以我正在尝试为网站制作一个导航栏，但是有很多链接 - 以至于在移动大小调整上你需要能够滚动。问题是它没有看到中间div的其余内容。

设置如下：

HTML：

<div class="nav-link-holder inactive">
 <div class="nav-link nav-link-style" data-target="category-div-1">TITLE OF LINK</div>
 <div class="nav-div inactive" id="category-div-1">
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
  </div> <!--closes NAV-DIV -->
  <div class="nav-link nav-link-style" data-target="category-div-2">TITLE OF LINK</div>
  <div class="nav-div inactive" id="category-div-2">
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
  </div> <!--closes NAV-DIV -->
</div> <!-- closes the holder -->

如此多的嵌套div的问题是当一个溢出另一个时，它看不到内容。因此，如果“LIST OF LINKS”的组合内容长于设备高度，则需要能够向下滚动。我可以使用css在nav-div上显示滚动条，但它不活动，所以我认为它无法看到内容。

CSS：

.nav-link-holder {
   width: 100%;
   position: fixed;
   top: 60px;
   left: 0;
   padding: 0;
   margin: 0;
   z-index: 8100;
}
.nav-link-style {
   display: inline-block;
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 60px;
   text-align: center;
   background-color: rgba(0, 0, 0, .9);
   cursor: pointer;
   font-size: 15px;
   padding: 0 !important;
   z-index: 8100;
}
.nav-div {
   width: 100%;
   position: relative;
   padding: 5px 0 10px 0;
   margin: 0;
   background-color: rgba(0, 0, 0, .9);
   overflow-y: scroll;
   text-align: center;
   z-index: 8500;
}
.list-group {
    width: 100%;
    height: auto;
    position: relative;
    margin: auto;
    text-align: center;
}

.list {
    width: 300px;
    position: relative;
    height: auto;
    padding: 5px 15px 15px 15px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

所有具有数据目标的div都是使用javascript扩展nav-div的链接，这些javascript会添加一个活动和非活动类（仅影响显示属性）。当nav-div在移动设备上扩展时，它的高度太长了。当内部div超过“holder”高度时，如何让它滚动nav-div容器？这是我作为初稿使用的codepen - 当你点击“catagory 1”并将with减少到小于400px时它会遇到同样的问题：http://codepen.io/ebevers/pen/PqybBb

Answer 1

我需要将overflow-y：scroll添加到导致溢出的div的父级 - 在这种情况下，它是list-group div。

嵌套DIVS不“看到”溢出内容

1 个答案: