html - 如何让 block 级元素粘在 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

Working fiddle.

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;
}

​