Css 将ul与固定div中的底部对齐

我在一个固定的边栏中创建了两个ul。 我试图将blue ul与固定div的底部对齐，但不起作用

<div class="sidebar">
<ul style="background:green;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul class="align-bottom" style="background:blue;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="main">
MAIN CONTENT
</div>

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  overflow-x: hidden;
  background: grey;
  width: 150px;
}

.main {
  position: absolute;
  top:0;
  left: 150px;
  z-index: 1;
}

.align-bottom {
  position: relative;
  bottom:0;
  width: 100%;
}

试验
试验
试验


试验
试验
试验

主要内容
.侧边栏{
位置：固定；
排名：0；
左：0；
z指数：1；
身高：100%；
溢出x：隐藏；
背景：灰色；
宽度：150px；
}
梅因先生{
位置：绝对位置；
排名：0；
左：150px；
z指数：1；
}
.对齐底部{
位置：相对位置；
底部：0；
宽度：100%；
}

我的错在哪里

---

提前感谢。

更改

。将底部位置从
相对位置对齐到
绝对位置

.align-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:150px
}

更改
。将底部位置从
相对位置对齐到
绝对位置

.align-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:150px
}

编辑：刚刚意识到您的原始解决方案没有包含
位置：绝对。。。不过——如果我说的话也有帮助的话——欢迎你：D

保险商实验室对其应用了保证金，所以你需要做的就是

  .align-bottom {
    position: absolute;
    bottom:0;
    left:0;
    width:150px;
    margin: 0; // add this
  }

编辑：刚刚意识到您的原始解决方案没有包含
位置：绝对。。。不过——如果我说的话也有帮助的话——欢迎你：D

保险商实验室对其应用了保证金，所以你需要做的就是

  .align-bottom {
    position: absolute;
    bottom:0;
    left:0;
    width:150px;
    margin: 0; // add this
  }

问题
您似乎希望将子元素放置在父元素的底部

回答
将子css设置为具有绝对位置

我的回答是：

使图元具有相对位置意味着将图元从其默认初始位置移动（在应用样式之前）

因此，你说，你能走到自己的最底层吗

通过指定绝对值
您正在使用父元素，因此可以移动到父元素的底部
您似乎希望将子元素放置在父元素的底部

回答
将子css设置为具有绝对位置

我的回答是：

使图元具有相对位置意味着将图元从其默认初始位置移动（在应用样式之前）

因此，你说，你能走到自己的最底层吗

通过指定绝对值
您正在使用父元素，因此可以移动到父元素的底部