상위 요소가 min-height: 100%를 설정하면 하위 요소는 높이를 상속하지 않습니다.

Question

min-height: 100%;를 설정하여 div 컨테이너가 최소한 페이지의 전체 높이를 차지하도록 만드는 방법을 찾았습니다. 그러나 중첩된 div를 추가하고 height: 100%;를 설정하면 컨테이너 높이까지 확장되지 않습니다. 이 문제를 해결할 수 있는 방법이 있나요?

html, 본문 {
  높이: 100%;
  여백: 0;
}

#방지 {
  최소 높이: 100%;
  배경: 분홍색;
}

#격리-그림자-왼쪽 {
  높이: 100%;
  배경: 아쿠아;
}

  

    안녕하세요 월드!
  

Answer 1

상위 컨테이너에 height: 1px를 추가합니다. Chrome, FF 및 Safari에서 작동합니다.

Answer 2

이것은 최소 높이를 가진 상위 요소의 하위 요소가 높이 속성을 상속할 수 없는 보고된 웹킷(chrome/safari) 버그입니다: https://bugs.webkit.org/show_bug.cgi?id=26559

Firefox도 영향을 받은 것으로 보입니다(현재 IE에서는 테스트할 수 없습니다)

가능한 해결 방법:

• 위치 추가: #containment에서 상대
• 위치 추가: #containment-shadow-left에서 절대

내부 요소에 절대 위치가 지정되면 버그가 표시되지 않습니다.

참조 http://jsfiddle.net/xrebB/

2014년 4월 10일에 편집됨

현재 컨테이너 높이를 상속받는 min-height 부모 및 자식 요소가 필요한 프로젝트를 진행하고 있기 때문에 좀 더 조사했습니다.

우선: 현재 브라우저 동작이 실제로 버그인지 더 이상 확신할 수 없습니다. CSS2.1 사양은 다음과 같습니다:

컨테이너에 최소 높이를 설정하면 높이를 명시적으로 지정하지 않으므로 내 요소는 auto높이를 얻어야 합니다. 이것이 바로 Webkit과 다른 모든 브라우저가 수행하는 작업입니다.

두 번째로 제가 찾은 해결책:

컨테이너 요소를 display:table로 설정하고 height:inherit를 사용하면 display:table并使用height:inherit，它的行为与给它一个min-height为100%完全相同。而且 - 更重要的是 - 如果我将子元素设置为display:table-cell100%를 제공하는 것과 정확히 동일하게 작동합니다. 그리고 더 중요한 것은 하위 요소를 display:table-cell로 설정하면 컨테이너 요소의 높이가 100% 이상이든 완벽하게 상속된다는 것입니다.

전체 CSS:

으아아아

태그:

으아아아

http://jsfiddle.net/xrebB/54/를 참조하세요.