수평 스크롤 막대를 방지하면서 상위 Div가 하위 콘텐츠의 높이에 맞게 자동으로 확장되도록 하려면 어떻게 해야 합니까?

자식 키를 수용하기 위해 상위 Div 확장

웹 개발에서는 하위 키에 맞게 확장되는 상위 요소를 생성해야 하는 경우가 많습니다. 해당 하위 요소. 이 시나리오는 하위 요소의 높이가 변동하는 동적 콘텐츠 및 반응형 디자인으로 작업할 때 발생합니다.

일반적인 예는 하위 div가 상위 div의 높이를 결정하는 2열 레이아웃입니다. 이에 따라 상위 div를 확장하면 가로 스크롤 막대 없이 전체 콘텐츠가 표시됩니다.

이를 달성하려면 상위 div의 오버플로 속성을 auto로 설정하세요. 이를 통해 하위 콘텐츠가 커짐에 따라 상위 콘텐츠가 수직으로 확장될 수 있습니다.

#parent {
  overflow: auto;
}

가로 스크롤 막대 문제

하위 콘텐츠의 너비가 브라우저 창을 벗어나면 상위 콘텐츠가 div with Overflow: auto는 가로 스크롤 막대를 표시합니다. 이를 방지하려면 페이지 수준에서 스크롤바를 추가해야 합니다.

해결 방법 1: 상위 항목 오버플로

특정 브라우저의 경우 Overflow-x:hidden; 상위 div에서 가로 스크롤 막대를 제거하는 동시에 상위 div가 세로로 확장되도록 허용할 수 있습니다.

#parent {
  overflow: auto;
  overflow-x: hidden;
}

해결책 2: 디스플레이 속성

또는 디스플레이를 사용할 수 있습니다. 속성을 사용하여 테이블과 같은 레이아웃을 만듭니다. 상위 div의 표시 속성을 table로 설정하고 하위 div의 표시 속성을 table-row로 설정합니다. 이 접근 방식을 사용하면 가로 스크롤 막대를 만들지 않고도 상위 요소가 해당 행(하위 div)을 수용하도록 확장됩니다.

#parent {
  display: table;
}

#childRightCol, #childLeftCol {
  display: table-row;
}

이러한 솔루션은 하위 요소의 높이를 기준으로 상위 div를 확장하는 효과적인 방법을 제공하는 동시에 상위 수준에 원치 않는 수평 스크롤바가 있습니다.

위 내용은 수평 스크롤 막대를 방지하면서 상위 Div가 하위 콘텐츠의 높이에 맞게 자동으로 확장되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!