CSS-L4-001 / 레이아웃 제약

가변 헤더와 본문 높이

고급

문제

높이 400px인 .app을 세로 Flex로 만들고 header는 60px, .body는 남은 340px을 채우며 내부 스크롤되게 하세요. 본문 기본 최소 크기를 풀어야 합니다.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

확인할 조건

본문 높이
최소 높이
스크롤

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<div class="app" style="height:400px"><header>헤더</header><div class="body"><div style="height:1000px">긴 본문</div></div></div>
</body>
</html>

목표 화면

힌트

부모 높이와 자식의 최소 크기를 함께 제어하세요.

해설·정답 보기

min-height:auto가 긴 콘텐츠 크기를 유지하는 문제를 0으로 풀고 본문에만 스크롤을 둡니다.

.app{display:flex;flex-direction:column}.app header{flex:0 0 60px}.body{flex:1;min-height:0;overflow:auto}

모르는 문법은 코드 사전에서 ↗

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

풀이 결과

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.

← 같은 난이도 목록 다음 문제: 레이어 기반 디자인 시스템 →