오른쪽의 CSS 열, 컨테이너와 같은 높이

Question

컨테이너 안에 2 개의 div가있는 컨테이너가 있습니다. 하나는 컨테이너의 왼쪽면을 취하고 두 번째면 (rightBarItems)은 오른쪽면에 위치해야하지만 높이가 컨테이너 높이와 같아야합니다. 기본적으로 오른쪽에 열을 만듭니다.

HTML :

<div class="container"> 
     <div class="itemMain"><?php include("itemMain.php"); ?></div> 
     <div class="rightBarItems"><?php include("rightBarItems.php"); ?></div> 
</div> 

CSS :

.container { 
    overflow: hidden; 
    background: white; 
    padding-right: 20px; 
    -webkit-box-shadow: 4px 2px #492409, -4px 0 2px #492409; 
    -moz-box-shadow: 4px 0 2px -6 #492409, -1px 0 2px #492409; 
    box-shadow: 4px 0 2px #492409, -4px 0 2px #492409; 
} 

Answer 1

두 drity 솔루션 (둘 다 자신의 문제가)

첫 번째 :

1) 위치보다 상대적 컨테이너 2) 왼쪽 요소를 떠. 3) 위치 절대 오른쪽 소자 설정할 상단 : 0 및 하부 : 0, 오른쪽 폭

이와 물론 문제는 왼쪽 cotainers 콘텐츠 권리들보다 커야한다는 것이다

두 번째 경우 (html에 더 많은 요소를 추가 할 수있는 경우) : 1) 컨테이너의 상대적 위치 2) 오른쪽 및 왼쪽 컨테이너을 플로팅합니다. 3) 오른쪽 요소의 "bg"인 새 div를 만듭니다. 4) position 절대 값 : 이전 : 오른쪽 : 0, 위쪽 : 0, 아래쪽 : 0 및 너비 : 5) 필요에 따라 Z- 인덱스 조정

: O

편집 : 후자 솔루션의

빠른 샘플 : http://jsbin.com/ecaced/1이

Answer 2

height: auto; 또는 height: 100%; 작동합니다.