[질문] 브라우저 사이즈에 따라 변하는 높이

ykihwa · Post by **ykihwa** » 2005 06 21 19:38 28

일반적으로 브라우저의 높이가 변함에 따라 그 사이즈가 변하게 하려면
sytle="height : 100%;" 를 사용했었습니다.

그런데

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

이런식으로 선언이 되어 있을 경우 %가 적용이 안되는 것을 알았습니다.

sytle="height : 100%;" 이런식으로 사용하는것 말고

브라우저 사이즈 변경시 같이 변경될 수 있는 방법은 없나요?

Post by **hyeonseok** » 2005 06 22 09:43 30

ykihwa wrote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

이런식으로 선언이 되어 있을 경우 %가 적용이 안되는 것을 알았습니다.

적용 됩니다.

html,
body {
height: 100%;
}

를 미리 지정해 주셔야 합니다.

ykihwa · Post by **ykihwa** » 2005 06 22 14:16 37

오홋! 정말 그렇군요

답변 감사 드립니다.

body {
height: 100%;
}

를 미리 설정해주니 바로 되는군요

그런데 IE상에서는 적용되어 보여지는데 파이어 폭스에서는

그렇지 못하군요 뭔가 잘못 된건가요?

파이어 폭스가 웹 표준을 지키는 브라우저로 알고 있는데

왜 적용이 안돼는 건가요?

Post by **hyeonseok** » 2005 06 22 16:36 04

음...되야 되는건데...

혹시 사용하신 코드를 올려주실 수 있으신가요?

제가 테스트한 코드는 아래와 같습니다.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
	height: 100%;
	padding: 0;
	margin: 0;
}
#full-height {
	height: 100%;
	background: #aaa;
}
</style>
</head>
<body>
<div id="full-height">This is a 100% height block.</div>
</body>
</html>

ykihwa · Post by **ykihwa** » 2005 07 06 13:59 22

^_^; 신경을 많이 써주시는데 답글이 늦었습니다.
원본 소스는 다음과 같습니다.

===============================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<meta name="author" content="Yang Ki Hwa">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
body{
height: 100%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

div {
padding: 0px 0px 0px 0px;
border: 0px solid #99CCFF;
}

#logo{
}

#main{
display: block;
}

#left{
height: 100%;
padding: 10px 2px 100px 5px;
width: 250px;
margin-bottom: 0px;
float: left;
background-color: #EDDCDC;
border: 0px solid #EDDCDC;
}

#validator{
font-size: 11pt;
}

#right{
height: 100%;
padding: 10px 1px 100px 1px;
width: 150px;
float: right;
background-color: #66CC00;
border: 0px solid #66CC00;
}

#center{
height: 100%;
padding: 10px 1px 100px 1px;
background-color: #9900FF;
border: 0px solid #9900FF;
}
</style>
</head>
<body>
<div id="logo">
Blog
</div>
<div id="main">
<div id="left">
<div id="mypic">
</div>
<div id="myinfo">
Name : <br>
Nick Name : <br>
Religion : <br>
Major : <br>
Brithday : <br>
Now :
</div>
<div id="calendar">
</div>
<div id="category">
</div>
<div id="under_title">

</div>
<div id="copyright">
WARNING : All Right Reserved. Unauthorized duplication is a violation of applicable laws.
</div>
<div id="validator">

</div>
</div>
<div id="right">
<div id="new_article">
New Articles
</div>
<div id="hot_article">
Hot Articles
</div>
<div id="rank">
</div>
</div>
<div id="center">

this is content

</div>
</div>
</body>
</html>

박민권 · Post by **박민권** » 2005 07 06 21:26 44

잘됩니다.
님의 소스에서 두군대만 고치면요. :)

Code: Select all

body{
    height: 100%;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

아래처럼 수정
html,  <-이게 빠졌습니다.
body{
    height: 100%;
    margin: 0; <- 이 방식은 어떨까요?
}

px -> 단위를 적는 것은 중요합니다.
단, 0%, 0em, 0px 는 모두 0 이므로 수치가 0일 경우는 뒤에 px등의 단위를
붙일 필요가 없습니다. 때문에 margin: 0px; 대신 margin: 0;를 추천합니다.

border: 0px solid #9900FF;
-> border: 0 solid #9900FF; 이것도 요렇게!!!

어? 그런데 border의 두께가 0이면...
border: none; 이렇게 해버려야 할 것 같습니다. :|

Code: Select all

#main{
    display: block;
}

아래처럼 수정해주세요
#main{
    height: 100%; <- #main때문에 다른 애들이 늘어나지 못하고 짜부됐어요. ㅜ_ㅜ
    /*display: block;*/ <- 이거는 필요 없습니당.
}

div태그 자체는 기본이 display: block; 이기 때문에 따로 적어주실 필요가 없습니다.

ykihwa · Post by **ykihwa** » 2005 07 08 16:16 38

오! 정말 되는 군요!!!!

친절한 답변에 정말 감사 드립니다.

오.... 이렇게 후련 할 수가!

Mozilla 한국 커뮤니티

[질문] 브라우저 사이즈에 따라 변하는 높이

[질문] 브라우저 사이즈에 따라 변하는 높이

Re: [질문] 브라우저 사이즈에 따라 변하는

IE는 적용이 되는데 파이어폭스는 적용이...

^_^; 글이 늦었습니다. 원본 소스는...

현석님 말씀대로

[감사]오오오오오! 되는군요 +_+

Who is online