CSS 화면 끝까지 차는 세로 1px 선 만드는 방법 질문 정보
CSS 화면 끝까지 차는 세로 1px 선 만드는 방법 질문첨부파일
본문
처음엔 테이블로 작업하려고 했으나 메뉴가 늘어나면서 복잡해지고 향후 수정을 간편하게 하기 위하여 배운다는 입장으로 DIV와 CSS 로 배우면서 작업을 하고 있습니다.
새벽부터 이것저것 다 해보고 검색해보아도 도저히 해결하지 못한 부분이 있어서 이렇게 질문하게 되었습니다.
질문의 요점은 홈페이지는 아래와 같은 3단 구조인데 각 박스 사이마다 1px의 자동으로 화면 끝까지
늘어나는 세로줄을 넣고자 하는겁니다.
-------------------
l 로고 l메뉴 l 본문 l
l l l l
l l l l
-------------------
↑ ↑ 1px 화면 길어짐에 상관없이 자동으로 화면 끝까지내려오는 세로줄 삽입
어제부터 해결이 안되서 오늘 5시에 일어나서 부터 작업을 했지만 허리와 머리가 아프고 해결은 안되고 있습니다. 고수님들의 답변 간절히 기다리겠습니다. 감사합니다.
댓글 전체
소스를 좀 더 찾아 보았습니다.
<!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" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Markup by 윤선상" />
<title>header와 footer의 높이값을 100%로 설정하는 방법</title>
<style type="text/css">
html, body {margin:0; padding:0; height:100%; font-family:"맑은 고딕", malgun;} /* font-family가 빠지면 Opera에서 제대로 나오지 않습니다. */
body {background:#000000; font-size:0.75em; color:#666;}
#container {position:relative; width:100%; background:#ffffff; height:auto !important; height:100%; min-height:100%;} /* height:auto !importnat가 빠지면 IE7, IE8, FF, OP, SF, CR에서 문제가 생깁니다. */
#header {padding:1em; background:#ddd; border-bottom:1px solid #000000;}
#header h1 {font-size:2em; color:#000000;}
#content {padding:1em 1em 80px 1em;}
#content h2 {font-size:1.5em;}
#content strong {color:#ff0000;}
#aaa {position:relative; float:left; width:100px; background:pink; height:auto !important; height:100%; min-height:100%; border-right:1px solid #000000;}
#bbb {float:left; width:100px; background-color:pink; background-repeat:repeat-y;}
#ccc {float:left; background-color:purple;}
#footer {position:absolute; width:100%; bottom:0; background:#ddd; border-top:1px solid #000000;}
#footer p {padding:1em; margin:0;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>header와 footer의 높이값을 100%로 설정하는 방법 (v.2009.12.09)</h1>
</div>
<div id="content">
<div id="aaa">
aaa
<div id="1">1111</div>
<div id="2">1111</div>
<div id="3">1111</div>
<div id="4">1111</div>
</div>
<div id="bbb">
bbb
</div>
<div id="ccc">
<h2>본문</h2>
<p>
height:100%<br />
혹시나 궁금해 하시는 분들이 계실 것 같아 만들어 올려봅니다.<br />
조금이나마 도움이 되었으면 좋겠네요^^<br /><br />
<strong>테스트 결과 IE6, 7, 8, FF, OP, SF, CR에서 모두 동일한 화면을 얻을 수 있었습니다.asdfsdf</strong><br /><br />
퍼블리셔들이여~ 영원하라~!
</p>
</div>
</div>
<div id="footer">
<p>(C) yoon.s.s | hack이 사라지는 그 날이 하루 빨리 오기를...</p>
</div>
</div>
</body>
</html>
이와 같은 경우에도 aaa, bbb, ccc의 경우는 화면 아래까지 내려오지 않네요. 어렵네요..쩝
<!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" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Markup by 윤선상" />
<title>header와 footer의 높이값을 100%로 설정하는 방법</title>
<style type="text/css">
html, body {margin:0; padding:0; height:100%; font-family:"맑은 고딕", malgun;} /* font-family가 빠지면 Opera에서 제대로 나오지 않습니다. */
body {background:#000000; font-size:0.75em; color:#666;}
#container {position:relative; width:100%; background:#ffffff; height:auto !important; height:100%; min-height:100%;} /* height:auto !importnat가 빠지면 IE7, IE8, FF, OP, SF, CR에서 문제가 생깁니다. */
#header {padding:1em; background:#ddd; border-bottom:1px solid #000000;}
#header h1 {font-size:2em; color:#000000;}
#content {padding:1em 1em 80px 1em;}
#content h2 {font-size:1.5em;}
#content strong {color:#ff0000;}
#aaa {position:relative; float:left; width:100px; background:pink; height:auto !important; height:100%; min-height:100%; border-right:1px solid #000000;}
#bbb {float:left; width:100px; background-color:pink; background-repeat:repeat-y;}
#ccc {float:left; background-color:purple;}
#footer {position:absolute; width:100%; bottom:0; background:#ddd; border-top:1px solid #000000;}
#footer p {padding:1em; margin:0;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>header와 footer의 높이값을 100%로 설정하는 방법 (v.2009.12.09)</h1>
</div>
<div id="content">
<div id="aaa">
aaa
<div id="1">1111</div>
<div id="2">1111</div>
<div id="3">1111</div>
<div id="4">1111</div>
</div>
<div id="bbb">
bbb
</div>
<div id="ccc">
<h2>본문</h2>
<p>
height:100%<br />
혹시나 궁금해 하시는 분들이 계실 것 같아 만들어 올려봅니다.<br />
조금이나마 도움이 되었으면 좋겠네요^^<br /><br />
<strong>테스트 결과 IE6, 7, 8, FF, OP, SF, CR에서 모두 동일한 화면을 얻을 수 있었습니다.asdfsdf</strong><br /><br />
퍼블리셔들이여~ 영원하라~!
</p>
</div>
</div>
<div id="footer">
<p>(C) yoon.s.s | hack이 사라지는 그 날이 하루 빨리 오기를...</p>
</div>
</div>
</body>
</html>
이와 같은 경우에도 aaa, bbb, ccc의 경우는 화면 아래까지 내려오지 않네요. 어렵네요..쩝