如何獲得一個塊級元素來堅持一個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; 
}