HTML 테이블 높이 100% 맨들기


뭐 하나 수정할게 있어서 소스를 보니 무려 HTML DOCTYPE 이 없고, 레이아웃이 table로 되 있었다. -.-


대충 요대로 두고 조금 수정하고 끝내려니까 레이아웃이 훅 깨져버려 결국 DOCTYPE을 추가하고 이것저것 군데군데 소스를 꽤 수정했다.


DOCTYPE을 추가해서 훅 바뀐것 중에 하나가 전체 레이아웃을 맹글고 있는 맨 바깥 테이블 높이가 100%가 안되는 것이였다.


기냥 다시 원상복구 할려다가 고친게 아까워서 검색을 해보니 역시 똘똘한 사람들이 많았다.



아무튼 테이블 높이를 100% 로 할려면


요렇게 html, body 스타일에 height: 100% 를 적용시켜 주고 해당 테이블 스타일에 height:100% 를 추가해 주면 된다.


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

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			html, body{ height:100%; margin:0px; }
		</style>
	</head>

	<body>
		<table style="height:100%; width:100%;">
			<tr>
				<td style="text-align:center;">
					100% 테이블 높이
				</td>
			</tr>
		</table>
	</body>
</html>


※ DOCTYPE 이 없으면 IE 개발자도구로 보면 문서모드가 쿼크 모드로 보인다. 중요한 DOCTYPE을 안 넣다니 -.-



※ 제발 코딩할때 들여쓰기 좀 했으면 좋겠다. -_- 들여쓰기만 잘해도 소스가 있어보인다 -.-

'CSS' 카테고리의 다른 글

HTML 테이블 높이 100% 맨들기  (2) 2014.05.20
table cellspacing, cellpadding 속성을 css 로 처리하기  (1) 2011.11.12
Trackback 0 Comment 2
  1. 2014.05.29 12:54 address edit & del reply

    비밀댓글입니다

  2. BN 2014.06.06 17:59 address edit & del reply

    안녕하세요, 찾다가 질문올립니다.
    DTD타입 XHTML 1.0 Transitional에서 테이블 높이 100%으로 했습니다.
    그 테이블에 tr이 세개가 있는데, 위 아래 2개는 px로 높이 지정하고, 1개는 height=""으로 했습니다. 그런데 IE에서는 높이px 지정한게 적용이 안되네요. 크롬이랑 파폭은 가운데 본문 부분만(height="") 유동적으로 늘어나는데 익스는 세개가 동시에 비슷한 비율로 늘어나네요. 뭐가 문제인지 혹시 짐작가는거라도 있으신지요ㅠㅠ

prev 1 ··· 39 40 41 42 43 44 45 46 47 ··· 223 next