如何防止固定可滚动列表中的隐藏元素？

Question

我的下拉列表有问题。如您所见，最后一个可滚动元素被隐藏。当我删除标题时，最后一个元素可见，但不与标题一起显示。我找不到问题，因为我不明白这里发生了什么。这已经在我的页面上上线了，所以也许有一个小修复可以处理所有事情。改变整个设计是很困难的。

这是我的代码：

#dropdown-menu {

  height: 60%;

  display: block !important;

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  top: unset; 

  width: 100%;

  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, .2);

}

#header {

  padding-top: 28px;

  justify-content: center;

  display: flex;

  cursor: pointer;

  font-size: 12px;

  touch-action: none;

  padding: 10px 12px;

  padding-top: 28px;

  margin-bottom: 5px;

}

#header::before {

  content: '';

  position: absolute;

  height: 4px;

  width: 20px;

  background: red;

  border-radius: 8px;

  top: 15px;

  left: 50%;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}

#list {

  height: 100%;

  max-height: unset;

  overflow: scroll;

  overflow-x: hidden;

  font-size: 12px;

  position: relative;

}

#list .element {

  height: 30px;

  position: relative;

  padding: 10px 12px;

  display: flex;

  background-color: gray;

}

#list .element:nth-child(even) {

  background-color: #f2f2f2;

}

<div id="dropdown-menu">

  <div id="header">

    <span>Notifications</span>

  </div>

  <div id="list">

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element">Last element</span>

  </div>

</div>

Answer 1

出发height: calc(100% - 58px);_#list#dropdown-menu {&nbsp; height: 60%;&nbsp; display: block !important;&nbsp; position: fixed;&nbsp; left: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; top: unset;&nbsp;&nbsp; width: 100%;&nbsp; box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, .2);}#header {&nbsp; padding-top: 28px;&nbsp; justify-content: center;&nbsp; display: flex;&nbsp; cursor: pointer;&nbsp; font-size: 12px;&nbsp; touch-action: none;&nbsp; padding: 10px 12px;&nbsp; padding-top: 28px;&nbsp; margin-bottom: 5px;}#header::before {&nbsp; content: '';&nbsp; position: absolute;&nbsp; height: 4px;&nbsp; width: 20px;&nbsp; background: red;&nbsp; border-radius: 8px;&nbsp; top: 15px;&nbsp; left: 50%;&nbsp; -webkit-transform: translateX(-50%);&nbsp; -ms-transform: translateX(-50%);&nbsp; transform: translateX(-50%);}#list {&nbsp; height: calc(100% - 58px);&nbsp; overflow: scroll;&nbsp; overflow-x: hidden;&nbsp; font-size: 12px;&nbsp; position: relative;}#list .element {&nbsp; height: 30px;&nbsp; position: relative;&nbsp; padding: 10px 12px;&nbsp; display: flex;&nbsp; background-color: gray;}#list .element:nth-child(even) {&nbsp; background-color: #f2f2f2;}<div id="dropdown-menu">&nbsp; <div id="header">&nbsp; &nbsp; <span>Notifications</span>&nbsp; </div>&nbsp; <div id="list">&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element"></span>&nbsp; &nbsp; <span class="element">Last element</span>&nbsp; </div></div>