내 자녀 DIV가 부동 부모로부터 100% 높이를 상속받지 못하는 이유는 무엇입니까?

Floating Parent 내의 하위 DIV 높이 100% 적용

제공된 HTML 및 CSS에서 노력에도 불구하고 내부 DIV의 높이는 0px로 유지됩니다. 부모의 100%로 선언하려면 height.

해결책:

이 문제를 해결하려면 상위 DIV인 "outer"에 Flexbox 기능을 활성화하기 위한 "display: flex" 속성이 필요합니다.

#outer {
  display: flex;
}

Flexbox는 유연한 레이아웃 지원을 도입하여 내부 DIV인 "내부"를 수직으로 확장하여 점유할 수 있도록 합니다.

추가 고려 사항:

1. 브라우저 호환성: Flexbox는 최신 브라우저에서 널리 지원되지만 문제가 발생할 수 있습니다. 이전 버전의 Internet Explorer(예: IE9)와의 호환성 문제. 다양한 브라우저 간의 호환성을 보장하려면 접두사를 사용하세요.
2. 항목 정렬과 자체 정렬: "align-items"는 하위 항목의 수직 정렬을 결정하는 상위 항목의 속성입니다. 기본값은 "stretch"로, 사용 가능한 높이를 채우기 위해 모든 자식을 수직으로 늘립니다. 하위 DIV에 대해 다른 정렬이 필요한 경우 "align-self" 속성을 사용하세요.
3. JS Fiddle 예: https://jsfiddle.net/bv71tms5/2/를 방문하여 제안된 솔루션의 실제 사례를 확인하세요.

위 내용은 내 자녀 DIV가 부동 부모로부터 100% 높이를 상속받지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!