본문 바로가기

BUGboard

웹표준에서 table height 100% 적용 안되는 경우 해결법 입니다.


웹표준에 맞춰 작업을 하다가 

table 에서 height 100% 적용안되는 경우가 있어 해결법을 올려둡니다.




원인은... 웹표준에서 table 사용시 height 값을 바로 가져오지 못하기 때문입니다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


쉬운 방법은, 위 문장을 아래와 같이 변경하는 것입니다. (XHTML 1.0 을 HTML 4.01 로 변경하는게 핵심)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




그런데, 이 방법은 XHTML 1.0 을 HTML 4.01 로 바꾸는 것이기 때문에,

XHTML 을 사용하고자 하는 경우에는 다른 방법을 사용해야 합니다.



우선, CSS 에 다음 내용을 추가 합니다.


html, body, #fullheight {

height:100%;

}



그리고, table 에서 사용할 때는, 아래와 같이 div 안에 넣어주면 됩니다.


<div id="fullheight">

<table width=100% id="fullheight">

<tr><td>...</td></tr>

</table>

</div>



이렇게 하면, body 와 div 를 거쳐 height 값을 가져올 수 있기 때문에,

table 에서 height 100% 를 적용할 수 있게 됩니다.



html 4.01 관련한 설명은 아래 링크를 참고하세요. (링크에 div 관련 설명은 안나옵니다)

http://www.apptools.com/examples/tableheight.php