如何使菜单向上扩展以容纳新添加的条目

Question

如下图所示，我有一个菜单，我想向该菜单添加条目或项目。我的限制是保持菜单左下角的位置。换句话说，我希望每次输入添加菜单应在“左上角”高度扩展，左下角保持不变。这个想法是无论添加的条目数量如何，菜单都应该扩展以容纳新添加的条目，以便 image_1 中的两个按钮总是出现而不被菜单隐藏。请查看下面发布的 css 代码，请告诉我如何修改它以达到上述要求。

CSS:

#select-site-layers-overlay{
    position: absolute;
    top:800px;
    right: 0px;
    padding: 15px;

    display: block;
    width: 305px;
    height: 200;

    border: 1px solid white;
    border-radius: .15rem;
    background-color: white;

    z-index: 2; 
    cursor: pointer; 
}

img_1:

img_2:

Answer 1

如您所知，您希望菜单底部距顶部 800 像素，而不是指定顶部距离，您可以将底部指定为：

bottom: calc(100% - 800px);

这里的100%是指包含元素的高度，在你的例子中是body。

这是一个示例片段。删除一个项目并看到列表从顶部而不是底部收缩。添加一个项目，它会根据需要向上扩展。

body {
  background: cyan;
  height: 1000px;
}

#select-site-layers-overlay{
  position: absolute;
  bottom: calc(100% - 800px);
  right: 0px;
  padding: 15px;

  display: block;
  width: 305px;
  height: 200;

  border: 1px solid white;
  border-radius: .15rem;
  background-color: white;

  z-index: 2; 
  cursor: pointer;
  
  height: auto;
}

<ul id="select-site-layers-overlay">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

如何使菜单向上扩展以容纳新添加的条目

How to make menu expand towards up to accommodate newly added entries

html

javascript

css

angularjs

angular