搜索下拉列表动态增长后，如何让Done按钮始终位于底部？

要让Done按钮始终固定在下拉菜单底部，不受列表元素数量影响，可以通过Flex布局实现，借助Bootstrap内置类加少量自定义样式即可解决：

核心修改思路 #

1. 将下拉菜单容器设为垂直方向的Flex容器，让内部元素按垂直方向排列
2. 让列表容器占据下拉菜单的剩余空间，内容过多时自动滚动
3. 按钮容器固定在底部，不随列表内容变化移动

修改后的代码 #

HTML部分

<div class="dropdown col" id="dropdown-search-id">
  <input type="text" class="form-control dropdown-toggle" id="inputSearch" placeholder="Search for a term ">

  <div class="col dropdown-menu d-flex flex-column" aria-labelledby="inputSearch" style="max-height: 300px;">
    <div id="search_list_container" class="flex-grow-1 overflow-y-auto">
      <ul id="inputSearchEntries">
        <li id="searching_li" style="visibility:hidden">
          <img src="{{static_dir}}/loader.gif" alt="Loading" style="width:15%"/>
        </li>
      </ul>
    </div>

    <div id="doneSearchButton" class="d-flex justify-content-end mt-2"> 
      <button type="submit" class="btn btn-primary">Done</button>
    </div>
  </div>
</div>

可选自定义样式（用于精细控制）

#dropdown-search-id .dropdown-menu {
  max-height: 300px; /* 可根据需求调整下拉菜单的最大高度 */
}

#search_list_container {
  flex: 1;
  overflow-y: auto;
}

#doneSearchButton {
  border-top: 1px solid #eee; /* 可选：给按钮添加分隔线，提升视觉区分度 */
  padding-top: 8px;
}

关键修改点说明 #

• d-flex flex-column：将下拉菜单转为垂直Flex容器，内部元素垂直排布
• max-height: 300px：限制下拉菜单的最大高度，避免内容过多时超出屏幕范围
• flex-grow-1 overflow-y-auto：让列表容器占据下拉菜单除按钮外的全部空间，内容超出高度时自动显示滚动条
• mt-2：给按钮添加上边距，与列表保持合理间距

这样无论列表中有多少个<li>元素，Done按钮都会固定在下拉菜单底部，列表内容过多时会自动滚动，不会挤压按钮位置。

内容的提问来源于stack exchange，提问作者elelias