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

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 {

  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: calc(100% - 58px);

  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>