절대 위치 요소의 부모가 접히는 것을 막는 방법

Question

절대 위치 요소의 부모가 접히지 않게하려면 어떻게해야합니까? 다음 코드에서

은 외부 DIV의 높이가 0 :

<div id="outer" style="position: relative;"> 
    <div id="inner" style="position: absolute; height: 100px;"> 
     <p>This is the inner content.</p> 
    </div>    
</div> 

이 떠 요소를 다루는이 질문에, How do you keep parents of floated elements from collapsing?, 매우 유사하다이, 그러나 나는 솔루션의 몇 가지 시도 (스페이서 및 clearfix 클래스 포함) 작동하지 않습니다.

감사합니다.

Answer 1

다음과 같은 작업을 할 수 없습니다. 일단 자녀가 절대 위치에 있으면 사실상 부모 (외관상)의 바깥 쪽입니다.

$(".absolutepos").each(function() { 
    $(this).parent().css("height",$(this).height()); 
}); 

및 절대 위치에 사업부를 배치은 "absolutepos"클래스 추가 :

<div id="outer" style="position: relative;"> 
    <div id="inner absolutepos" style="position: absolute; height: 100px;"> 
     <p>This is the inner content.</p> 
    </div>    
</div> 

Answer 2

당신이 jQuery를 포함 한 경우

당신이 무엇을 할 수 있는지,이 unelegant 해킹을 사용하는 것입니다 다음과 같이 할 수 있습니다. "이중 양육"으로 칭함 :

비슷한 문제에 대해, 나는 상대적인 부모 객체 (상대 부모 객체의 0,0에서 시작)와 동일한 차원의 절대적으로 정의 된 박스를 정의했다. 플로트의 외부 한계를 무시할 수있는 객체를 배치 할 수있는 이점이 있습니다 (동적 플로트의 너비와 관계없이 페이지에 객체를 중앙에 배치해야했습니다.)

"듀얼 양육 "숙청 문제 모두 :

1. 절대 부모는 수레의 높이 (그러나 수레에 적응 할 수 있었다 상호 부모의 높이를) 가져올 수 없습니다.
2. 상대 부모는 페이지 중앙에있는 개체를 배치 할 수 없습니다.이 개체는 부동 소수점 사이의 가운데를 찾고, 가운데 맞춤 콘텐츠가 부동 개체의 테두리를 넘지 않도록합니다.

내가 중심 설정 상자를 유지하면서이 설정이 과도하게 쥐어 짜내는 방법을 보여주는 fiddle (contains documentation)을 보았습니다. 기본적인 아이디어는 아래 코드에 설명되어 있습니다 :

HTML (보조 노트에 : 사업부 년대의 순서 (왼쪽 중앙 오른쪽 중앙 왼쪽에서 오른쪽, ...)는 무관합니다.)

<header> 
    <div class="header-left">left</div> 
    <div class="header-center"> 
     <div class="centerinner">middle</div> 
    </div> 
    <div class="header-right">right</div> 
</header> 

내부 DIV에 절대 위치를 사용함으로써 CSS

header { 
    position:relative; /* shrinkwrap to contained floats */ 
    /* display: block /* no need to state this here */ 
    width: 100%; 
    margin:0; 
    padding:0; 
    vertical-align: top; 
    /* background-color: papayawhip; /* Debug */ 
} 
.header-left { /* top left of header. header adapts to height */ 
    float:left; 
    display:block; 
    /* width and padding as desired */ 
} 
.header-center { /* absolute reference for container box */ 
    position:absolute; 
    left: 0; 
    width: 100%; 
    height:100%; 
    /* background-color: gainsboro; /* Debug */ 
} 
.centerinner { /* centered within absolute reference */ 
    margin-left:45%; 
    margin-right:45%; 
    padding-left: 1ex; 
    padding-right: 1ex; 
    background-color: #D6A9C9; 
    width: -moz-fit-content; 
    width: -webkit-fit-content; 
    width: fit-content; 
    height:100%; 
} 
.header-right { 
    float:right; 
    text-align: right; 
    padding-left: 1ex; 
    color: forestgreen; 
/* background-color: #D6F2C3; /* Debug */ 
}