블록 레벨 요소를 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; 
}