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

Posted 2023-03-06

【中文标题】如何使菜单向上扩展以适应新添加的条目

【英文标题】：How to make menu expand towards up to accommodate newly added entries

【发布时间】：2021-07-16 07:42:48

【问题描述】：

如下图所示，我有一个菜单，我想向该菜单添加条目或项目。我的限制是保持菜单左下角的位置。换句话说，我希望每次条目都是 添加了菜单应该在“左上角”的高度展开，左下角保持不变。 这个想法是无论添加多少条目，菜单都应该扩展以适应新添加的条目，以便 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：

【参考方案1】：

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

bottom: calc(100% - 800px);

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

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

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>