Mozilla 한국 커뮤니티

Firefox, Thunderbird 사용자 및 Mozilla 활동가 모임
http://3.34.94.169/

div height=100% 문제!

http://3.34.94.169/viewtopic.php?t=10035

Page 1 of 1

div height=100% 문제!

Posted: 2008 07 15 13:21 37
by 강짱
제가 며칠전부터 회사 홈페이지를 만들면서부터
div 코딩을 하고 있습니다.
컨텐츠가 100%늘어남에 따라 깔린 BG도 같이 늘어나게 하려고 하는데요
http://hyeonseok.com/pmwiki/index.php/Css/Height
여기 사이트를 참고하여셔 해봐도 도무지 되지가 않네요
고대로 따라하면 100%가 (bg도)늘어나지만
content-area부분에서
Left와 Right를 주면
윈도우 정사이즈 화면 아래부터는 bg가 먹질 않네요.
body가 늘어나야 하는데 늘어나질 않구요.
제가 작업하고있는중인데요.
http://211.239.162.97:8888/01_about/test2.jsp
여기저기 답변을 찾아봤지만 정확하게 알수가 없더라고요.
코드는 이렇습니다.

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=utf-8" />
<link href="/share/css/import.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
<style type="text/css">
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#head {
	height: 210px;
	background: #ddd;
	position: relative;
	z-index: 1;
}
#body {width:952px;
	border:1px solid red;
	min-height:100%;
	margin: -210px 0 -50px;
	background:url(/images/common/middle_bg.gif) repeat-y;
}
* html #body{
	height: 100%;
}
 #c_area {width:946px;padding: 210px 0 50px;border:1px solid blue;}
#Left {width:245px;border:1px solid red;}
#Left h1.tit01{font-size:12px;width:245px;height:65px;background:url(/images/about/left_tit.gif) no-repeat left top;margin-bottom:11px;}
#Left h1.tit02{font-size:12px;width:245px;height:65px;background:url/images/service/left_tit.gif) no-repeat left top;margin-bottom:11px;}
#Left h1.tit03{font-size:12px;width:245px;height:65px;background:url(/images/solution/left_tit.gif) no-repeat left top;margin-bottom:11px;}
#Left h1.tit04{font-size:12px;width:245px;height:65px;background:url/images/reference/left_tit.gif) no-repeat left top;margin-bottom:11px;}
#Left h1.tit05{font-size:12px;width:245px;height:65px;background:url(/images/support/left_tit.gif) no-repeat left top;margin-bottom:11px;}
#Left h1.tit06{font-size:12px;width:245px;height:65px;background:url(/images/recruit/left_tit.gif) no-repeat left top;margin-bottom:11px;}
#Left ul li{font-size:12px;width:183px;height:29px;display:block;margin-left:31px;border-bottom:1px solid #ebebeb;}

#Content{padding:0;float:right;display:inline;width:643px;overflow:hidden;vertical-align:top;background:url(/images/common/con_top_bg.gif) no-repeat top left;border:1px solid green;}
#foot {clear:both;height: 50px;margin:0;background: #ddd;z-index: 1;}

</style>
</head>

<body>
<div id="head">
	요건 100px 높이 헤드
</div>
<div id="body">
<div id="c_area">
	<!-- LEFT -->
<div id="Left"></div>
<div id="Content"><p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
		abcd<p>컨텐츠 영역 1</p>
		<p>컨텐츠 영역 2</p>
		<p>컨텐츠 영역 3</p>
		<p>(계속 추가해서 테스트 가능)</p>
</div>
</div>
</div>
<div id="foot">
	요건 50px 높이 풋
</div>

</body>
</html>

Re: div height=100% 문제!

Posted: 2008 07 15 17:50 13
by hyeonseok
제가 답글을 달아야만 할 것 같은...링크가;;

정확히 어떻게 나와야 하는지 잘은 모르겠는데...아마 float 때문에 박스의 높이가 안늘어서 생기 안채워진다고 생각하신 것 같습니다.

#c_area {
width:946px;
padding: 210px 0 50px;
border:1px solid blue;
overflow: hidden;
}

이렇게 한번 해보세요...

Re: div height=100% 문제!

Posted: 2008 07 16 18:47 59
by 강짱
이런 간단한것을...전계속
overflow: visible;로 했었다는..윽,
감사해요
해결했어요!!우후
All times are UTC+09:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited