100%레이아웃에서 content부분 테이블 height를 100%로 했을때...
초록이
전체 100% 레이아웃에서 가운데 컨텐츠부분에 높이 100%인 테이블을 넣을려고 하는데..
100% height의 테이블을 넣으니 top부분의 높이만큼 스크롤이 생기네요..
컨텐츠 부분 height 100%랑 상단 top의 높이를 같이 계산해서 브라우저 크기를 잡는듯한데..
마진값을 -값을 이용해서 하니 컨텐츠 부분이 올라가고 절대위치를 줘도 그 위치값만큼 공간을 인식하네요..
게시판 글을 찾아봐도 답이 없고...
이부분을 스크립트로 해결하는 수 밖에 없는지.........
!doctype html public -//w3c//dtd xhtml 1.0 strict//en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
titleuntitled document/title
style type=text/css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#head {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
height: 100%;
min-height: 100%;
margin: -100px 0 -50px;
}
* html #body {
height: 100%;
}
#content-area {
height: 100%;
padding: 100px 0 50px;
}
#foot {
height: 50px;
background: #ddd;
}
/style
/head
body
div id=head 요건 100px 높이 헤드 /div
div id=body
div id=content-area
table width=100% border=1 height=100%
tr
td bgcolor=#00ffff /td
td /td
td /td
td /td
td /td
td /td
td /td
/tr
tr
td /td
td /td
td /td
td /td
td /td
td /td
td /td
/tr
tr
td /td
td /td
td /td
td /td
td /td
td /td
td /td
/tr
/table
/div
/div
div id=foot 요건 50px 높이 풋 /div
/body
/html
-
일본녀 2025-03-27
table 태그에 height 속성은 자제해야하며 Strict 에서는 불가입니다.
css 의 height 속성을 이용하면 되지만
위의 100% 레이아웃 구조상 편법을 써도 IE6 에서는 적용이 되지 않습니다.
자바스크립트로 창크기에 따라 table 의 height 스타일을 자동조절하는 방법을 권해드립니다. -
향율 2025-03-27
저도 위와 같은 경우 때문에 고생하고 있는데 비슷한 경우라 올립니다.
아래에 있는 !--[if IE]라는 기능은 IE에서만 적용된다고 합니다.
hack를 사용하지 않고 적용시킬수 있다네요..
문제는 테이블을 100%로 주면 화면에서 넘어간다는 ㅠㅠ
!--[if IE]
style type=\text/css\
#body {
height: 100%;
margin: -100px 0 -50px;
}
#content-area {
height: 100%;
padd -
민아 2025-03-27
그럼 #content-area에 height 100%인 table은 만들 수 없단 말인가요??
-
두메꽃 2025-03-27
100% 레이아웃 하시려면 저렇게 수정하시구요.
테이블은 height=\100%\ 속성안됩니다 -
AngelsTears 2025-03-27
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#head {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
min-height: 100%;
_height: 100%;
margin: -100px 0 -50px;
}
#content-area {
padding: 100px 0 50px;
}
#foot {