CSS：将元素与底部对齐的问题

Question

我有关于垂直对齐元素的 CSS 问题。

请看一下这个网址： http://leisureonly.com/gravedigger/grow-up [可能是 NSFW]

如果您查看右侧的侧边栏，就会发现底部有一个块，上面有一个图像，上面写着“掘墓人”。我希望这个块在侧边栏的底部对齐。

我尝试将其包装在 div 中，并将 Vertical-align: Bottom 应用于掘墓人元素，但这并没有提供所需的结果。 这样做的正确方法是什么？

Answer 1

好吧，首先，sidebar_gravedigger 位于 side_bar 的底部，所以，第一个问题是侧边栏那么长。如果您希望该元素位于容器的底部（side_bar 的父容器），我建议这样做：

.sidebar_gravedigger {
    position: absolute;
    bottom: 20px; /*container padding*/
}

#sidebar {
    padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}

.container{
    position: relative;
}

Answer 2

像这样的事情可能会有所帮助：

.sidebar {
  position: relative;
  height: 100%;
}

.module {
  position: absolute;
  bottom: 0;
}