지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

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

DDD
풀어 주다： 2024-11-23 08:56:13
원래의
469명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn
이전 기사：내용이 셀 크기를 초과할 때 표 셀 높이를 어떻게 제어할 수 있습니까? 다음 기사：내 CSS 변수가 애니메이션되지 않는 이유는 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
2015
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2183
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1841
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1730
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1752
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿