Mozilla 한국 커뮤니티

본문의 배경을 화면에 꽉차게 만들려고 하는데요..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
	<head>
		<style type="text/css">
			html, body { height: 100%; margin: 0px; }
			form { height: 100%; }
		</style>
	</head>
	<body>
		<div style="height: 100%; border: 3px solid red">
			<div style="width: 100px; height: 100%; float: left; border: 3px solid blue">파란박스</div>
			<div style="width: 100px; height: 2000px; float: left; border: 3px solid green">녹색박스</div>
			<div style="clear: both"></div>
		</div>
	</body>
</html>

위와같은 레이아웃에서 파란박스의 모양은 녹색박스가 화면 세로길이보다 짧을때는 화면에 꽉차있는(height: 100%) 상태로, 녹색박스가 화면보다 길어지면 녹색박스의 길이만큼 같이 늘어나주기를 원합니다. (물론 제일 바깥의 빨간 박스도 같이 늘어나야겠지요)

근데 위와같이 만들어보니까 잘 안되네요.. 어떻게 하면 될지 궁금합니다

빨간박스가 늘어나지 않는 이유는 height를 100%로 잡았기 때문에 녹색박스가
커져도 빨간박스는 늘어나지 않습니다. 익스에서는 height를 잡아놔도 내부
컨텐츠의 길이가 늘어나면 늘어나지만 표준은 늘어나지 않습니다.

빨간박스의 height: 100% 속성을 없앤다면 녹색박스가 늘어나는 대로 빨간박스가
늘어나겠죠. 하지만 대신 파란박스는 height: 100%라고 해도 빨간박스의 절대적
높이가 없기 때문에 늘어나지 않습니다.

한가지 해결 방법은 아래처럼 빨강박스안에 파랑, 그 안에 녹색박스를 넣습니다.

Code: Select all

┏빨강━━━━━━┓
 |┏파랑━━━━┓|
 | |┏ 녹색━┓   | |
 | | |           |   | |
 | |┗━━━━┛ | |

이렇게 하면 녹색이 커지면 파랑과 빨강은 따로 높이를 정해주지 않는 이상 녹색의
높이에 맞춰지겠죠.

지금 레이아웃을 어떻게 구성하시려는 것인지 잘 모르겠지만 아직 테이블 개념에서
벗어나지 못하신 것 같습니다. 저도 첨에 CSS로 레이아웃 구성할때 님과 같은 문제에
직면했었습니다. 테이블 개념을 확실히 버리시고 레이어 개념이 잡히게 되면 위와
같은 꽁수를 사용하지 않아도 됩니다. 굳이 저렇게 만들 필요가 없거든요.

녹색 레이어가 늘어나면 그 옆에 있는 파랑 레이어가 같이 늘어나게 하는 방식이
바로 테이블 방식 입니다. 하나의 셀이 늘어나면 옆의 셀도 늘어나는 방식이죠.

CSS레이어 레이아웃은 다른 방향으로 접근하셔야 합니다.
테이블로 레이아웃 구성하던 방식을 CSS레이어에 적용하는 것은
자전거 타는 버릇으로 오토바이 탈때 패달을 구르려 하는 것과 같습니다.

익숙해진 테이블 개념을 버리는 것은 힘들지만 일단 버리게 되면 테이블로는
불가능한 레이아웃까지도 아주 빠르고 세밀하게 구성할 수 있게 되실겁니다.

그렇군요.. 생각해보니까 단순히 td 태그를 div 태그로 바꾸려는 생각뿐이었네요

정곡을 찔러주신 조언도 감사드립니다 ^^ 다시 코딩하러 가겠습니다!

Mozilla 한국 커뮤니티

div의 height: 100%

div의 height: 100%

힘들겠네요.

!!