전체 높이를 확보하는 레이아웃 문제 해결 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 웹 레이아웃 디자이너 (초급~중급)
핵심 요약
height: 100%
는 부모 요소의 높이에 의존하지만,html
/body
에 높이 설정이 없으면 작동하지 않음 (코드:html, body { height: 100% }
)min-height: 100%
는 콘텐츠 확장 시 유연한 레이아웃 제공 (코드:min-height: 100%
)- 컴포넌트 기반 프레임워크(React, Vue)에서는
:root
사용이 더 안정적 (코드::root { height: 100% }
)
섹션별 세부 요약
1. 문제 발생 원인
height: 100%
는 부모 요소의 높이를 기준으로 계산html
/body
에 명시적 높이 설정 없이 사용하면 높이 확장 실패- 예시:
.main-content { height: 100% }
→html
/body
높이 미설정 시 작동하지 않음
2. 해결 방법
html
/body
에height: 100%
설정 (코드:html, body { height: 100% }
)min-height: 100%
사용 시 높이 확장과 기본 뷰포트 높이 보장100vh
vsmin-height: 100%
비교:
- 100vh
: 고정된 뷰포트 높이 (헤로 섹션에 적합)
- min-height: 100%
: 부모 높이 기준 (콘텐츠 확장 시 유연)
3. 프레임워크별 고려 사항
- Vue/React/Nuxt에서
html
/body
선택자 적용 제한 (스코프 스타일링 문제) :root
사용 권장:
- html
요소 선택 (선택자 우선순위 높음)
- 전역 스타일 오버라이드 방지 (코드: :root { height: 100% }
)
결론
레이아웃 확장 문제 발생 시 다음 점 검토:
html
/body
에height: 100%
설정 여부- 프레임워크 스타일 스코핑 영향 여부
:root
사용으로 전역 스타일 안정성 확보
> ✅ 실무 팁: min-height: 100%
대신 100vh
사용 시 뷰포트 고정이 필요한 헤로 섹션에 적합함.