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

Question

我有一个下拉列表，其中列出了用户的帐户。该列表必须是动态的，因为用户最多可以有十个帐户。我现在的实现使得div在添加帐户时变得更大，但是当我希望它在底部变得更大时，它会变得更大。在这里我们的一些scree镜头

这是元素的顶部应该是：

创建另一个计划后

正如您所看到的那样，下拉列表现在已经很高了。我希望这种效果发生，但顶部应该保持静态，底部应该变大。这是我的标记和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