절대 위치 부모를 기반으로 자식 요소의 "높이"설정

Question

부모 요소가 있고 상위 요소의 높이를 설정하고 싶습니다. 예를 들면 다음과 같습니다.

이제 "자식"의 높이를 설정하려면 "부모"에 설정된 높이 값도 지정해야합니다. 그렇지 않으면 "자식"단독으로 높이 값을 설정하는 효과가 없습니다.

#parent { height: 200px; } 
#child { height: 75%; } 

"어린이"의 높이를 200px의 75 %로 설정합니다. "parent"에서 높이를 제거하면 "child"에 높이가 설정되지 않습니다.

이제 높이를 설정하는 대신 "부모"의 위치를 ​​절대로 설정하면 높이를 설정하지 않고 도망 갈 수 있으며 "자식" 여전히 작동 할 것입니다 :

#parent { position: absolute; top: 0; bottom: 0; } 
#child { height: 75%; } 

제가 알고 싶은 것은 이것이 표준 행동인지 우연히 작동하는지 여부입니다. 또한 이것이 표준이라면 요소를 배치 (위치를 설정함으로써)에주는 것은 암묵적으로 높이에 대한 어떤 값을주는 것을 의미합니까?

Answer 1

될 것입니다 : 절대적으로-위치 요소를 들어, 반대쪽 (예 : left 및 right 또는 top 및 bottom)의 오프셋을 0으로 설정하면 요소가 포함 된 블록의 너비 또는 높이까지 각각 늘어납니다.

이것은 일반적으로 사용되는 트릭 일뿐만 아니라 표준 동작이기도합니다. 피투성이의 세부 사항은 사양에 here입니다. 이 식에있어서 관건 :

'상단'+ '마진 가기'+ '경계 위쪽 : 절대 위치 요소 용

가 수직 차원의 사용 값이 제약 조건을 만족해야 블록

을 함유 -width '+'패딩 탑 '+'높이 '+'패딩 하단 '+'테두리 바닥 폭 '+'마진 하단 '+'하단 '= 높이 (이것은 높이를 계산하기위한 것으로 너비 계산을위한 해당 방정식이 있습니다 뿐만 아니라 here을 찾을 수 있습니다.)

그래서, 다른 모든 값에 대해 디폴트 값을 가정하면, 이것은

0 + 0 + 0 + 0 + '높이'는 + 0 + 0 + 0 = 블록

함유 높이

+ 0

상위 요소가 모두 정적 인 절대 위치 요소의 포함 블록은 항상 뷰포트 (또는 초기 블록이있는 )이며, 일반적으로 브라우저의보기 영역과 같은 높이입니다 (또는 jsFiddle의 결과 iframe은 예). 이것은 방금 설명한 효과를 만듭니다.

이 비율이의 높이에 대하여 계산됩니다 : 당신이 당신의 부모 요소에 대한 명시적인 높이를 지정하지 않았기 때문에

이 당신의 자식 요소 as a percentage의 높이를 계산하기 위해 그것을 암시 높이를 제공합니다 생성 된 상자의 containing block. 일부 0이 아닌 값으로 top 및/또는 bottom을 설정 한 경우에도 사실

, 상자 위의 식에 따라 조정됩니다.

"생성 된 상자를 포함하는 블록의 높이"는 해당 블록에 대해 지정된 값 또는 계산 된 값인 height을 나타내는 것이 아니라 사용 된 값, 즉 화면에서 렌더링 된 것으로 계산 된 높이를 참조하십시오. 이것은 부모 요소에 height을 설정하지 않고 도망 칠 수있는 이유에 대한 혼란의 원인 일 수 있지만 브라우저는 암시 적 높이에 따라 하위 요소의 높이를 계산하는 방법을 여전히 알고 있습니다.

Answer 2

물론 예. 이것은 표준 동작입니다.

항상 당신이 absolute 요소에 대한 top: 0; 및 bottom: 0; 설정할 때, 그것은 부모 height 값으로 height 설정을 의미합니다. 당신이 top: 0;와 bottom: 0;와 absolute 자식 요소가있는 경우 예를 들어, height: 400px;와 함께 relative 요소를 고려, 자식 요소는 기본 개념이있다 height: 400px;

<div style='position: relative;height: 400px'> 
    <div style='position: absolute;bottom: 0;top:0;'> 
     ... 
    </div> 
</div>