Floated Div를 부모 높이의 100%로 만들려면 어떻게 해야 합니까?

부모 내 플로팅 Div의 높이 100% 달성

플로트 div를 부모 높이의 100%로 설정하려고 하면 다음과 같은 문제가 발생할 수 있습니다. 내부 div가 높이 0px로 렌더링되는 문제에 직면합니다. 이 동작은 HTML 요소의 기본 수직 정렬로 인해 발생합니다. 이 문제를 해결하려면 수직 정렬을 활성화하도록 상위 div의 표시 속성을 구성해야 합니다.

해결책:

내부 div가 상위 div의 높이와 일치하도록 강제하려면 , CSS를 다음과 같이 수정하세요.

#outer {
  display: flex;
  /* Add necessary prefixes for cross-browser compatibility. */
}

추가 고려 사항:

• 접두사: 브라우저 간 호환성을 위해 적절한 CSS 공급업체 접두사를 추가하는 것이 중요합니다.
• Internet Explorer: Flexbox에 대한 제한된 지원으로 인해 Internet Explorer 9 및 이전 버전에서는 레이아웃이 표시되지 않을 수 있습니다. 올바르게.
• 정렬: 기본적으로 상위 항목의 align-items 속성은 "stretch"로 설정됩니다. 즉, 내부 div를 포함한 하위 요소가 수직으로 정렬되고 늘어납니다. 사용 가능한 공간을 채우기 위해. 하위 div에 대해 다른 정렬이 필요한 경우 align-self 속성을 사용할 수 있습니다.

라이브 예:

라이브를 보려면 다음 링크를 클릭하세요. JSFiddle 데모: https://jsfiddle.net/bv71tms5/2/

위 내용은 Floated Div를 부모 높이의 100%로 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!