DIV 같은 높이

div 높이 같게
div 같은 높이

1 개요[ | ]

수평으로 배열된 div들의 높이를 똑같이 하고자 한다. 물론 기본적으로 div들의 높이를 똑같이 지정하는 방법을 생각해볼 수 있으나, 이렇게 할 경우 내부에 들어가는 내용의 양에 따라 높이가 동적으로 변화할 수 없게 된다. 높이를 고정하지 않고 적용할 수 있는 방법 3가지를 알아보자.

2 컨테이너 배경색[ | ]

바깥 div(컨테이너)에 배경색을 주면 내부 div들을 모두 포함한 사각형 영역에 적용된다. (실제로 div의 높이가 같아지는 것이 아니지만 효과는 유사하다.)

html

Copy

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DIV 높이 같게</title>
</head>
<style type="text/css">
#container { float:left; background:#ccc; }
#container div { float:left; width: 100px; }
</style>
<body>
<div id='container'>
	<div>다람쥐 헌 쳇바퀴에 타고파.</div>
	<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
	<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
</div>
</body>
</html>

예제: http://zetawiki.com/ex/css/div_same_h.php

3 컨테이너 배경그림[ | ]

위 문단과 같은 방법으로는 div별로 다른 배경색을 지정할 수 없다. 따라서 div별로 다른 배경을 넣고 싶다면, 배경색 대신 배경그림을 사용해야 한다.

html

Copy

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DIV 높이 같게</title>
</head>
<style type="text/css">
#container { float:left; background:url(http://upload.wikimedia.org/wikipedia/commons/8/8d/RGBR.png) repeat-y; }
#container div { float:left; width: 100px; }
</style>
<body>
<div id='container'>
	<div>다람쥐 헌 쳇바퀴에 타고파.</div>
	<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
	<div>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
</div>
</body>
</html>

예제: http://zetawiki.com/ex/css/div_same_h2.php

4 컨테이너 오버플로우(개별 색상)[ | ]

html

Copy

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DIV 높이 같게</title>
</head>
<style type="text/css">
#container { overflow: hidden; }
#container > div {
  float: left;
  background: #ccc;
  width: 100px;
  margin-bottom: -2000px;
  padding-bottom: 2000px;
}
</style>
<body>
<div id='container'>
	<div style='background:#f00'>다람쥐 헌 쳇바퀴에 타고파.</div>
	<div style='background:#0f0'>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
	<div style='background:#00f'>다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파. 다람쥐 헌 쳇바퀴에 타고파.</div>
</div>
</body>
</html>

예제: http://zetawiki.com/ex/css/div_same_h3.php

5 같이 보기[ | ]

HTML div

6 참고[ | ]

http://www.ejeliot.com/blog/61