固定div内的溢出div

Question

我已经拥有了我想要的东西。 overflow-y我希望能够滚动浏览div＃scrollable中的屏幕，但是一旦溢出，它就不会一直向下滚动到选项8，使其不可见。为什么会如此，我该如何解决？

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
#fixed {
  width: 300px;
  height: 100%;
  max-height: 345px;
  position: fixed;
  background: #333;
  border: 2px solid #333;
}
#menu {
  background: pink;
  line-height: 25px;
  padding-left: 20px;
}
#scrollable {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

ul {
  list-style: none;
}
ul li a {
  color: white;
  line-height: 40px;
  padding-left: 20px;
  display: block;
}
ul li a:hover {
  background: blue;
}

＆＃13;

<div id="fixed">
  <div id="menu">
    Hello
  </div>
  <div id="scrollable">
    <ul>
      <li><a>Option 1</a></li>
      <li><a>Option 2</a></li>
      <li><a>Option 3</a></li>
      <li><a>Option 4</a></li>
      <li><a>Option 5</a></li>
      <li><a>Option 6</a></li>
      <li><a>Option 7</a></li>
      <li><a>Option 8</a></li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/3hm1rxut/2/

Answer 1

您需要使用#scrollable计算calc() div的高度，因为在此菜单中还会占用一些空间，以便#scrollable不会获得div的100％高度。

height: calc(100% - 30px);

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
#fixed {
  width: 300px;
  height: 100%;
  max-height: 345px;
  position: fixed;
  background: #333;
  border: 2px solid #333;
}
#menu {
  background: pink;
  line-height: 25px;
  padding-left: 20px;
}
#scrollable {
  position: absolute;
  height: calc(100% - 30px);
  width: 100%;
  overflow-y: auto;
}

ul {
  list-style: none;
}
ul li a {
  color: white;
  line-height: 40px;
  padding-left: 20px;
  display: block;
}
ul li a:hover {
  background: blue;
}

＆＃13;

<div id="fixed">
  <div id="menu">
    Hello
  </div>
  <div id="scrollable">
    <ul>
      <li><a>Option 1</a></li>
      <li><a>Option 2</a></li>
      <li><a>Option 3</a></li>
      <li><a>Option 4</a></li>
      <li><a>Option 5</a></li>
      <li><a>Option 6</a></li>
      <li><a>Option 7</a></li>
      <li><a>Option 8</a></li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有多种方法可以解决您的问题。我会这样做：

在#scrollable div上添加填充顶部，并使#menu div绝对。将z-index添加到#menu div，使其保持在最顶层。此外，请务必在所有元素上添加box-sizing: border-box以防止超出指定的尺寸。

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#fixed {
  width: 300px;
  height: 100%;
  max-height: 345px;
  position: fixed;
  background: #333;
  border: 2px solid #333;
}
#menu {
  background: pink;
  line-height: 25px;
  padding-left: 20px;
  position: absolute;
  width: 100%;
  z-index: 10;
}
#scrollable {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-top: 25px;
}

ul {
  list-style: none;
}
ul li a {
  color: white;
  line-height: 40px;
  padding-left: 20px;
  display: block;
}
ul li a:hover {
  background: blue;
}

Answer 3

更改此

#scrollable {
  position: absolute;
  height: calc(100% - 20px);/* height shall not be 100% but rather (100%) - (half the line-height of li )*/
  width: 100%;
  overflow-y: auto;
}