css - 指定高度时 Overflow-Y 不起作用

Question

我正在制作一个新菜单，我正在尝试将我的内容设置成这样:

div with position fixed, defined height and overflow hidden
    div with position relative, overflow Y auto and defined height bigger than parent
    /div
/div

这是我的[编辑] jsfiddle:

https://jsfiddle.net/bp9qdfb9/

Answer 1

溢出应该赋值给溢出元素的容器:

.wrapper {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-align: center;
}

.wrapper > .container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: red;
  overflow-y: auto;
}

.wrapper > .container > .page {
  display: block;
  position: relative;
  /* overflow-y: auto; */
  width: 100%;
  height: 1500px;
  background-color: blue;
}

.wrapper > .container > .page > .wrap-in {
  display: inline-block;
  width: 80%;
  margin-top: 50px;
  padding-bottom: 50px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04);
}

<div class="wrapper">
  <div class="container">
    <div class="page">
      <div class="wrap-in">

      </div>
    </div>
  </div>
</div>