当底部是动态的时，如何使元素顶部保持静态。 -CSS

Question

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

这是元素顶部的位置：

创建另一个计划后

如您所见，对于其环境，下拉列表现在变得很高。 我希望这种效果发生，但顶部应保持静止，而底部应增大。 这是我的标记和CSS

的HTML

<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 %>

的CSS

.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: "";
  }
}      

Answer 1

我认为问题出在这行bottom: -179px;

无论您在该下拉菜单元素中添加什么。 它的位置将从底部开始计算。 因此在这种情况下底部将被固定，并且元素将在顶部方向上增加。 因此，请尝试从bottom到top转换定位