在固定 div 中将 ul 与底部对齐答案

【问题标题】：Align ul to bottom in fixed div在固定 div 中将 ul 与底部对齐
【发布时间】：2018-08-05 08:16:21
【问题描述】：

我在一个固定的侧边栏中创建了两个 ul。我试图将蓝色 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%;
}

https://jsfiddle.net/fj0b6jx3/6/#&togetherjs=2v1pIMRuTT

我的错误在哪里？

提前致谢。

【问题讨论】：

标签： css html position alignment

【解决方案1】：

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

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

我的回答解释：
使元素具有相对位置，意味着您将元素从其默认初始位置（在应用样式之前）移动。

你因此说，你能不能移动到你自己的底部，（它不能）

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

【讨论】：

【解决方案2】：

编辑： 刚刚意识到您的原始解决方案不包括 position: absolute; ... /p>

ul 已经应用了边距，所以你需要做的就是......

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

【讨论】：

【解决方案3】：

将.align-bottom 的位置从relative 更改为absolute

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

https://jsfiddle.net/qnbyxyay/1/

【讨论】：