javascript - 滚动菜单的固定 div

Question

我的网络应用程序有问题。如果我的资源管理器窗口大小很小，我的菜单(android 设计)不会滚动。

示例图片:

正常屏幕尺寸

屏幕尺寸过小的问题

我尝试在 css 中使用溢出但不起作用...

我的 HTML:

<nav>
  <div class="titre"><img class="l_menu_general" src="icons/ic_menu_black.png" alt="menu" style="width: 24px; height: 24px;" /></div>
  <div id="nav_menu">
    <div class="menu">
      <div class="l_menu">Accueil</div>
      <div class="l_menu l_notes">Notes</div>
      <div class="l_menu">Camera</div>
    </div>
    <div class="menu">
      <div class="l_menu">A propos</div>
    </div>
  </div>
</nav>

我的 CSS:

nav {
  position:fixed;
  font-weight: 500;
  font-size: 16px;
  background: #fff;
  box-shadow: 2px 0px 3px 0px rgba(0,0,0, .1);
  left: -82%;
  top: 0;
  box-sizing: border-box;
  z-index: 20;
  height: 100%;
  width: 80%;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

/* Pour écran large */
@media only screen and (min-width: 768px) {
  nav{
    width:500px;
    left: -510px;
  }
}

div.menu {
  border-top: 1px solid #ccc;
  padding-top: 8px;
  padding-bottom: 8px;
}

nav div.titre {
  display: block;
  padding-left: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
/* Pour écran large */
@media only screen and (min-width: 768px) {
  nav div.titre{
    padding-left: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.menu div.l_menu {
  display: block;
  padding: 16px;
}

.menu div.l_menu:hover {
  cursor: pointer;
  background: #c5cae9;
}

感谢回复，抱歉我的英语不好。

Answer 1

尝试在您的 css 中添加:

#nav_menu {
 overflow:scroll;
}