Mozilla 한국 커뮤니티

테이블의 경우

셀의 내용이 길어지면 길어질 수록

정해진 height 이상으로 늘어나는걸 볼 수 있습니다.

그러나 div의 경우 height를 지정하고 내용이 긴 경우
아래 div와 겹치는 현상이 발생하는데...(div가 정해진 height대로 고정된거 같음.)

내용물에 따라 div의 height가 자연적으로 늘어나게 할 수는 없습니까?

Xtrus wrote: 그러나 div의 경우 height를 지정하고 내용이 긴 경우
아래 div와 겹치는 현상이 발생하는데...(div가 정해진 height대로 고정된거 같음.)

내용물에 따라 div의 height가 자연적으로 늘어나게 할 수는 없습니까?

div의 style에 height를 설정하면 높이가 고정됩니다. 이게 정상이구요.
하지만 익스플로러는 늘어납니다. 아무리 고정시켜도 내용이 늘어나면 늘어납니다.
높이를 고정시켰으면 늘어나지 말아야지 늘어납니다. 어쩌라고 ㅠ_ㅠ

님은 아마 div의 최소높이를 잡아주고 싶기에 height를 넣어주신것 같은데
최소높이용 height는 min-height라는 것이 있습니다.
min-height를 사용하시면 내용이 없어도 일정 높이가 잡히고 내용이 늘어나면 같이 늘어납니다.

하지만 여기서 문제! 익스플로러는 css2의 min-height라는 당연하고도 기본적인
것을 지원하지 못합니다. 뭐 6.0이 4년전에 만들고 한번도 업그레이드 안했으니
당연한 결과겠죠.

그래도 불쌍한 익스를 위해서 익스의 괴상한 스타일을 이용하면 익스만 따로 height를
줄 수가 있습니다.

div.test{min-height:100px;} /* 표준 */
*html div.test{height:100px;} /* 익스전용 */

이렇게 스타일을 주시면 불여우는 위의 표준 스타일만 먹히고 익스는 아래쪽의
익스전용 스타일이 먹히므로 똑같이 동작합니다.
불여우는 표준동작대로 동작하는 것이고 익스는 min-height가 먹히지 않더라도
height가 먹히므로 기본높이가 잡히며 내용이 늘어날 경우 익스는 높이를 잡아도
내용이 늘어나므로 결과상 min-height랑 같은 동작을 보여줍니다.

정성스런 답변 감사합니다.