너비가 고정 된 높이가없는 절대 div 안에 100 % div

Question

절대적으로 배치 된 div가 있어야합니다. 두 개의 하위 div가 있습니다. 하나는 텍스트가 맨 위에 있고 다른 하나는 배경색이 맨 아래에 있습니다. 그래서 같이 :

<div class="test1"> 
    <div class="caption">Text that determines width of parent.</div> 
    <div class="bg"></div> 
</div> 

난 그냥 .test1에 배경 색상을 설정할 수 있습니다 알지만, 위치, 불투명도를 통해 나에게 역방향 호환 (IE 7 +) 제어를 제공하기 위해 별도의 사업부를 수 있도록이 배경이 필요 , 너비, 등 jQuery를 사용하여.

다음 CSS를 사용하면 텍스트가 .bg div 뒤에 있다는 것을 제외하고는 모든 것이 작동하도록 할 수 있습니다. 나는 위에 텍스트가 필요하다.

<style type="text/css"> 
.test1 { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
} 
.test1 .caption { 
    float: left; 
    white-space: nowrap; 
} 
.test1 .bg { 
    height: 50px; 
    background-color: #222; 
} 
</style> 

어떻게 .test1의 폭이 텍스트의 폭에 근거가 있고 .bg DIV 수 100 % 폭과 .caption 아래에있을 수 있습니까? 나는 이것이 IE 7 이상에서 작동 할 필요가 있음을 반복해야한다.

는 여기에 바이올린입니다 : http://jsfiddle.net/kbp6r/ 위치 문제에 대한

Answer 1

, 당신은 z-index의 마법에 의존해야합니다)은 (기본값은 position: static입니다) 비 정적 위치를 요소에 적용 할 수있다. 따라서 .bg 요소를 절대적으로 배치하고 상대적으로 .caption 요소를 배치하는 것으로 간주 했습니까? 당신은 더러운 위치 트릭을 사용할 수 .caption 같은 차원이어야하는 .bg 요소를 강제하기 위해

.test1 .caption { 
    position: relative; 
    white-space: nowrap; 
    z-index: 2; /* More than .bg so it will be above */ 
} 
.test1 .bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; /* Less than .caption so it will be stacked underneath */ 
} 

는 - 절대적으로 위치 요소가있을 때 다음과 같은 속성을 선언

top: 0; 
left: 0; 
bottom: 0; 
right: 0; 

에게 그것을 상위 컨테이너의 크기로 채울 것입니다.이 경우 상위 컨테이너의 크기는 내 추천에 따라 상대 위치를 사용했기 때문에 .caption의 내용으로 결정됩니다. http://jsfiddle.net/teddyrised/kbp6r/2/

Answer 2

아래 등 당신의 HTML을 변경

: 여기

어떻게 작동하는지 보여줍니다 바이올린입니다.

<div class="test1"> 
    <div class="bg"> 
     <div class="caption">Text that determines width of parent.</div> 
    </div> 
</div>