컨테이너 요소는 위치의 크기로 확장 : 절대 내용이 마크 업에서

Question

:

<div id="A"> 
    <div id="B"> 
    </div> 
</div> 

"# A"만약 위치를 가지고 상대와 "#B는"위치가 : 절대, 그 "# 보인다 A "는"#B "의 실제 크기와 상관없이 크기가 0으로 축소되기를 원합니다. "#A"를 내용의 크기로 확장하려면 어떻게해야합니까?

Answer 1

CSS로 처리 할 수 ​​없으므로 부모 컨테이너의 width 및 height (#A)을 설정하려면 자바 스크립트가 필요합니다.

.offsetHeight 및 .offsetWidth을 사용할 수 있습니다.

모두 반환 실제 width/height + padding-left 및 padding-right/padding-top 및 padding-bottom + border-left-width 및 border-right-width/border-top-width 및 border-bottom-width. 아래의 예에서

---

, 나는의 알파 값 부모 컨테이너 ( #A) 하위 컨테이너와 동일한 width와 backgroundImage 및 height을 부여하고 하위 컨테이너의 ( #B) background 설정 '의 border들과'한 그것을 더 잘 설명하기 위해 0.5에.

var a = document.getElementById('A'); 
 
var b = document.getElementById('B'); 
 

 
a.style.height = b.offsetHeight + 'px'; 
 
a.style.width = b.offsetWidth + 'px'; 
 
a.style.backgroundImage = 'url(http://www.lorempixel.com/' + b.offsetWidth + '/' + b.offsetHeight + ')'

#A { 
 
    position: relative; 
 
} 
 
#B { 
 
    position: absolute; 
 
    background: rgba(210,180,140, 0.5); 
 
    width: 300px; 
 
    height: 100px; 
 
    border: 5px solid rgba(210,0,0, 0.5); 
 
    padding: 10px; 
 
}

<div id="A"> 
 
    <div id="B"> 
 
    </div> 
 
</div>

당신은 여기에 대한 자세한 읽을 수 있습니다 : http://kingori.co/minutae/2013/05/relative-parent-absolute-children/

Answer 2

표시 옵션을 사용해 보셨습니까?

디스플레이 : 블록

코드의보다 자세한 버전을 제시해 주시겠습니까?