컨텐츠가 들어가는 중간 부분이 100% 채워지는 방법입니다.
의외로 까다로와서 가끔 헷갈릴때가 있는데요.
그래서 기억해 두려고 포스팅해봅니다.
예시
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>예제</title> <style type="text/css"> html, body { height:100%; margin:0; padding:0;} #head { position:relative; height:100px; background:#9CF;} #content { min-height:100%; margin:-100px 0 -100px 0; background:#0FC;} *html #content { height:100%;} #box { height:200px; padding:100px 0 150px;} #footer { height:100px; background:#ddd;} </style> </head> <body> <div id="head">상단임돠</div> <div id="content"> <div id="box">본문</div> </div> <div id="footer">카피라이트 부분</div> </body> </html> |
content의 height 값을 100%로 주고 head와 footer의 height값을 빼주면 완료.
