상대 div를 절대 내용으로 확장하는 방법은 무엇입니까?

Question

여기에 아주 기본적인 질문이 있지만 몇 시간 동안 나를 당황스럽게 만들었습니다. 상대적으로 위치한 div가 절대적으로 배치 된 내용으로 확장되도록하려면 어떻게해야합니까?

http://jsfiddle.net/X6ay2/10/

HTML

<div class="outer"> 
    <div class="inner"></div> 
</div> 

CSS : 당신의 요구에 맞게 외부의

.outer { 
    display: inline-block; 
    position: relative; 
    background: blue; 
    height: 100px; 
    padding: 20px; 
} 
.inner { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: red; 
} 

Answer 1

할 수 있습니다 직접적 정말, 절대 위치 요소가 문서 흐름에서하고 그래서 더 이상 정말하지 않는 부모에 '소속'으로. 일종의 해결 방법은 절대 위치 div를 100 % 너비로 설정하고 왼쪽 : 0으로 설정하면 부모의 너비까지 확장됩니다.

.outer { 
    display: inline-block; 
    position: relative; 
    background: blue; 
    height: 100px; 
    padding: 20px; 
} 
.inner { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    height: 50px; 
    background: red; 
} 

http://jsfiddle.net/X6ay2/14/

이에 대한 경고는 내부 DIV 패딩이있는 경우는 100 % 이상 연장 것이다. 이것을 막으려면, 내부 div가 border-box box-sizing 속성을 사용하도록하십시오.

.inner { 
    padding: 10px; 
    box-sizing: border-box; 
    -moz-box-sizing:border-box; 
} 

http://jsfiddle.net/X6ay2/15/

Answer 2

설정 폭입니다. 이 예는이

width:50px 

http://jsfiddle.net/X6ay2/12/