DIV 레이아웃 구현 문의.

qwer999 · Post by **qwer999** » 2006 03 16 03:28 40

http://www.pink-hman.com/pink/1111.jpg

DIV를 이용해서 이런 레이아웃의 홈페이지를 짜려고 하는데 문제가 좀 있네요.

중간에 하얀부분이 컨텐츠 영역인데, 이 부분에 컨텐츠가 브라우저 크기에 도달하지 못하면 거기서 하얀색 영역이 끝난다는게 문제입니다.

지금 제 지식으론 <body>밑에 바로 height 100%짜리 테이블을 추가해서 하얀색 배경 이미지를 넣던가, 저걸 통이미지-_-로 저장해서 가운데 정렬로 body에 백그라운드로 넣는 방법 밖에는 떠오르질 않고있습니다.

div 가 height 100%만 지원되면 간단하게 해결될것 같습니다만 검색을 해봐도 지금은 별 방법이 없는것 같군요.

혹시 body에 가로반복이미지 하나. 가운데 고정 이미지 하나 이런식으로 백그라운드를 두번 겹쳐서 넣을수있는 핵같은건 없을까요?

hiphapis · Post by **hiphapis** » 2006 03 16 10:21 49

qwer999 wrote:중간에 하얀부분이 컨텐츠 영역인데, 이 부분에 컨텐츠가 브라우저 크기에 도달하지 못하면 거기서 하얀색 영역이 끝난다는게 문제입니다.

무슨말씀이신지, 이해가 잘 안가네요..ㅎㅎ;

qwer999 wrote:혹시 body에 가로반복이미지 하나.

반복의 경우는 background-repeat 을 참고하시면 될 것 같고..

qwer999 wrote:가운데 고정 이미지 하나 이런식으로 백그라운드를 두번 겹쳐서 넣을수있는 핵같은건 없을까요?

div를 하나 더 만드셔서, 이 div에 background 정의 하시면 될 것 같은데요..

qwer999 · Post by **qwer999** » 2006 03 16 12:05 00

아; 제 설명이 좀 바보같군요. ㅠㅠ

http://www.pink-hman.com/pink/567.html

제가 원하는건 이런 페이지에서 하얀색 div가 contents의 길이에 상관없이 무조건 브라우저 끝까지 내려오게 만드는것 입니다.

Code: Select all

<!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=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body { 
	margin:0;
	background-image:url(bg.jpg);
	height:100%;
}
.contents {
	background-color:#FFFFFF;
	width: 200px;
}
-->
</style>
</head>
<body>
<div class="contents">contents</div>
</body>
</html>

코드는 이렇습니다.

div는 왜 height 100%가 안먹히는 건가요! ㅠㅠ
그렇다면 http://www.pink-hman.com/pink/ 이런식으로 오브젝트를 중앙에 두는것도 불가능한것 아닌가요?

hiphapis · Post by **hiphapis** » 2006 03 16 12:21 16

qwer999 wrote: 제가 원하는건 이런 페이지에서 하얀색 div가 contents의 길이에 상관없이 무조건 브라우저 끝까지 내려오게 만드는것 입니다.

아, 이해했습니다

현석님의 강좌 링크드릴께요..
(흠..제가 이렇게 링크 드려도 될런지..;;)

http://hyeonseok.com/pmwiki/index.php?n=Css.Height

qwer999 wrote:div는 왜 height 100%가 안먹히는 건가요! ㅠㅠ
그렇다면 http://www.pink-hman.com/pink/ 이런식으로 오브젝트를 중앙에 두는것도 불가능한것 아닌가요?

http://hyeonseok.com/pmwiki/index.php?n=Css.Position

oragi · Post by **oragi** » 2006 03 16 12:33 04

div는 절대적인 높이를 지정하지 않으면 내용물의 높이만을 가지게 됩니다.
상대적인 높이를 지정할시엔 상위 Element의 절대적(!)높이를 기준으로
높이가 구현되죠.

여기에 브라우져 화면의 100% 높이를 유지하는 레이아웃이 구현되 있으니
참고하시면서 작업하세요.

Mozilla 한국 커뮤니티

DIV 레이아웃 구현 문의.

DIV 레이아웃 구현 문의.

Re: DIV 레이아웃 구현 문의.

Who is online