HTML DIV tag: 높이 지정 - 고정높이와 자동조절되는 높이 - height: auto

DIV로 감싼 영역의 가로 또는 세로의 길이는 고정시킬 수도 있고, 브라우저 창의 가로폭에 따라 자동으로 조절되게 지정할 수도 있다.

아래의 두 예는 브라우저를 높이를 px로 고정시켰을 때와 자동(auto)로 설정했을 때의 차이를 볼 수 있도록 하였다. 브라우저를 좁히거나 늘려보기 바란다.


[높이를 자동(auto)으로 지정한 예]

<div style="border: 1px solid gold; padding: 10px; height: auto; min-height: 100px; overflow: auto;">

브라우저의 폭을 좁히면, 그에 따라 영역의 높이가 조절되므로, 내용이 DIV 테두리를 벗어나 보이지 않고, 영역안에 있게 된다.

DIV로 감싼 영역의 높이가 브라우저의 가로폭에 따라 자동으로 조절되도록 높이(height)속성을 자동(auto)로 주었다. 대형 모니터의 경우에는 브라우저의 폭이 상대적으로 넓게 펼쳐지기 때문에 그럴 경우를 생각해서 최소높이(min-height)를 지정해주었다.
</div>

[높이를 px로 고정한 예]

<div style="border: 1px solid gold; padding: 10px; height: 150px;">

브라우저의 폭을 좁히거나 늘려도, 그에 따라 영역의 높이가 조절되지 않고 고정되어 있으므로, 브러우저 폭을 좁히면, 내용이 DIV 테두리를 벗어나 보이게 된다.

데스크탑의 경우에는 대형모니터가 많이 쓰이고, 반면에 휴대형 기기 사용이 늘어나기 때문에 작은 창에서도 잘 보이도록 하려면, 가급적 px로 고정시키지 않는 것이 좋을 것 같다.
</div>

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...