전체 높이 레이아웃 문제 해결: HTML/CSS 가이드
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

전체 높이를 확보하는 레이아웃 문제 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 웹 레이아웃 디자이너 (초급~중급)

핵심 요약

  • 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/bodyheight: 100% 설정 (코드: html, body { height: 100% })
  • min-height: 100% 사용 시 높이 확장과 기본 뷰포트 높이 보장
  • 100vh vs min-height: 100% 비교:

- 100vh: 고정된 뷰포트 높이 (헤로 섹션에 적합)

- min-height: 100%: 부모 높이 기준 (콘텐츠 확장 시 유연)

3. 프레임워크별 고려 사항

  • Vue/React/Nuxt에서 html/body 선택자 적용 제한 (스코프 스타일링 문제)
  • :root 사용 권장:

- html 요소 선택 (선택자 우선순위 높음)

- 전역 스타일 오버라이드 방지 (코드: :root { height: 100% })

결론

레이아웃 확장 문제 발생 시 다음 점 검토:

  • html/bodyheight: 100% 설정 여부
  • 프레임워크 스타일 스코핑 영향 여부
  • :root 사용으로 전역 스타일 안정성 확보

> ✅ 실무 팁: min-height: 100% 대신 100vh 사용 시 뷰포트 고정이 필요한 헤로 섹션에 적합함.