Javascript 如何使元素的顶部保持静态，而底部保持动态-CSS

我有一个下拉列表，列出了用户的帐户。列表必须是动态的，因为用户最多可以有十个帐户。我现在的实现使div在添加帐户时变大，但当我希望它在底部变大时，它在顶部变大。这是我们的一些屏幕快照

这是元素顶部应位于的位置：

在创建另一个计划之后

正如您所看到的，下拉列表现在对于其环境来说已经很高了。我希望这种效果发生，但顶部应该保持静止，底部应该变大。这是我的标记和CSS

HTML

---

我认为问题在于这一行

底部：-179px

无论您在下拉元素中添加了什么。其位置将从底部计算。所以在这种情况下，底部是固定的，元素在顶部方向会增加。因此，尝试将定位从
底部
转换为
顶部
尝试将您的
下拉列表
与
顶部：30px
（或
顶部
的适当值）而不是
bottom
，这将使它粘在顶部并动态增长到底部@Dymos:remove
bottom:-179px并替换为
顶部：30px
。
<div class="project-background">
      <%= link_to "", "#projects-dropdown", class: "icon icon-project" %>
    </div>
    <% if current_user.accounts.any? %>
      <%= link_to snitches_path, class: "topbar-team__name" do %>
        <span class="topbar-team__name__text"><%= current_account.name %></span>
      <% end %>
    <% end %>
    <div id="projects-dropdown" class="dropdown hidden">
      <h3>Projects</h3>
      <% if current_user.accounts.any? %>
      <ul>
        <% current_user.accounts.each do |account| %>
        <li>
          <%= link_to account.name, switch_account_path(account), class: current_account.id == account.id ? "current-account" : "" %>
        </li>
        <% end %>
      </ul>
      <% end %>
      <%= link_to "✚ New Project", new_account_path, class: "button button--invitation" %>
    </div>
  </div>
<% end %>

.dropdown {
  position: absolute;
  bottom: -179px;
  z-index: 100;
  width: 205px;
  padding: 10px 0;
  border: 1px solid #cbcbcb;
  box-shadow: 0 0 5px #cbcbcb;
  background-color: rgb(249, 249, 249);

  &:after,
  &:before {
    position: absolute;
    top: -10px;
    left: 5px;
    border: solid 10px transparent;
    border-top: none;
    border-bottom-color: rgb(249, 249, 249);
    content: "";
  }
}