html - 如何让块级元素粘在 div 的底部（它本身是绝对定位的）？

Question

我有以下html代码：

<div class="main">
    <div class="sidebar">
     <div class="sidebar-footer">

      </div>
    </div>
</div>

和CSS：

.main { 
   position: relative;
}

.sidebar {
     position: absolute;
     bottom: 0;
     left: 0; 
     right: 0;
     height: 500px;
     margin-bottom: 10px;
}

我也需要侧边栏页脚将自己与侧边栏的底部对齐。我该怎么做呢？

Answer 1

工作小提琴。

CSS：

.main { 
    border: solid 1px blue;
    position: relative;
}

.sidebar {
    border: solid 1px red;
     position: relative;
     bottom: 0;
     left: 0; 
     right: 0;
     height: 500px;
     margin-bottom: 10px;
}
.sidebar-footer
{
    border: solid 1px green;
    position: absolute;
    width: 100%;
    bottom: 0px;
}

​</p>