집 >웹 프론트엔드 >CSS 튜토리얼 >상위 요소를 하위 요소에 맞게 수직으로 확장하려면 어떻게 해야 합니까?

상위 요소를 하위 요소에 맞게 수직으로 확장하려면 어떻게 해야 합니까?

How Can I Make a Parent `` Expand Vertically to Fit its Child Elements?

상위

확장 하위 요소를 수직으로 수용하기 위해

HTML에서는 하위 요소의 결합된 높이에 맞게 높이를 동적으로 조정하는 상위 요소가 필요한 경우가 많습니다. 예를 들어 상위

두 개의

각각 다양한 콘텐츠를 포함하는 하위 요소입니다. 기본적으로 상위

가장 큰 아이의 키만큼만 차지합니다. 그러나 상위

의 CSS를 수정하는 것은 가능합니다. 하위 항목의 높이를 기준으로 세로 확장을 활성화합니다.

이를 달성하려면 다음 CSS 규칙을 상위

에 적용할 수 있습니다.

overflow: auto;

이 규칙은 브라우저는 상위

에 수직 스크롤바를 자동으로 추가합니다. 콘텐츠가 사용 가능한 높이를 초과하는 경우. 결과적으로 상위

하위 요소의 증가된 높이를 수용하기 위해 수직으로 확장됩니다.

가로 스크롤 막대 문제 및 해결

주어진 예에서는 하위 콘텐츠가 브라우저 창의 너비에 따라 현재 CSS는 상위

에 가로 스크롤 막대를 도입합니다. 이 문제를 해결하고 스크롤 막대를 페이지 수준으로 이동하려면 다음 CSS 속성을 태그:

body {
  overflow-x: auto;
}

이렇게 하면 페이지 수준에 가로 스크롤 막대가 생성되어 하위 콘텐츠가 브라우저 창 너비를 초과하는 경우 사용자가 가로로 스크롤할 수 있습니다.

테이블을 사용한 대체 솔루션 디스플레이

상위

상위 요소에는 "table" 표시 속성을 사용하고 하위 요소에는 "table-row" 표시 속성을 사용하는 것입니다. 그러면 상위

테이블 컨테이너 역할을 하고 하위

는 테이블 행 역할을 합니다. 이 테이블 기반 접근 방식에서는 상위

의 높이가 하위 요소의 결합된 높이에 맞게 자동으로 조정됩니다.

위 내용은 상위 요소를 하위 요소에 맞게 수직으로 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：