Div : 높이를 둘러싸는 div의 100 %

Question

사이드 바를 컨테이너의 높이에 맞게 확장하려고합니다. 내가 뭘 놓치고 있니?

.container { 
    border: 1px solid red; 
    overflow:hidden; 
} 

.sidebar { 
    border: 1px solid blue; 
    width: 50px; 
    float: left; 
    min-height: 10px; 
    height: 100%; 
} 

.column { 
    border: 1px solid black; 
    width: 100px; 
    height: 200px; 
    float: left; 
}​ 

바이올린 : 당신이 절대적으로 그것의 내부에 사이드 바를 배치 할 수 있도록 link

Answer 1

.container { 
    border: 1px solid red; 
    overflow:hidden; 
    position:relative; 
} 

.sidebar { 
    border: 1px solid blue; 
    width: 50px; 
    min-height: 10px; 
    position:absolute; 
    top:0; 
    bottom: 0; 
} 

.column { 
    border: 1px solid black; 
    width: 100px; 
    height: 200px; 
    margin-left: 50px; 
}​ 

컨테이너의 위치를 ​​확인합니다. 그런 다음 사이드 바의 상단 및 하단 위치를 0으로 설정하여 전체 높이를 늘립니다. 또한 사이드 바의 너비만큼 왼쪽에서 열 div를 밀어 내야합니다.

Demo