footer 의 위치로 인해 질문드립니다. 정보
footer 의 위치로 인해 질문드립니다.본문
<style type="text/css">
/* Layout */
#wrap{width:100%}
#header{width:100%;height:40px;margin-bottom:10px;background:#eee}
#header .hslhead {width:900px;padding-top:14px;color:#777;margin:0 auto}
#container{width:900px;margin:0 auto;}
#container:after{display:block;clear:both;content:''}
#content{float:right;width:700px;min-height:100%;height:100%;}
#footer{width:100%;height:100%;margin-top:13px; background:#363839; border-top:3px solid #57b3df;}
#footer .tail {width:900px; padding:40px 0; color:#eee; margin:0 auto;}
</style>
container 의 길어진 내용에서는 footer 의 위치가 하단으로 내려가지만
내용이 익스플로어의 height 해상도보다 적을 경우 따라 올라오는 현상이 발생하는데
내용이 없으면 브라우저 아래 고정, 내용이 있으면 길어진 내용만큼 아래로 내려가는 방법을
알고싶습니다.
몇일째 헤매고 있네요 ㅠ
댓글 전체
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>하단100%</title>
<style>
* {margin:0; padding:0;}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap{width:100%;height:100%;}
#header_wrap{width:100%;height:50px;background:#fff;}
#header{width:100%;height:40px;background:#eee;margin-bottom:10px;position:relative;z-index: 1;}
#header .hslhead{width:900px;height:26px;padding-top:14px;color:#777;margin:0 auto;}
#container_wrap{width:900px;min-height:100%;height: 100%;height:auto !important;margin:-50px auto -116px;}
#container{width:900px;padding:50px 0 116px;margin:0;}
#container:after{display:block;clear:both;content:''}
#content{float:right;width:700px;height:100%;border:1px solid #ddd}
#footer{width:100%;height:100px;margin-top:13px;border-top:3px solid #57b3df;}
#footer .tail{width:900px; height:100px;padding:0; color:#eee; margin:0 auto;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="hslhead"></div>
</div>
<div id="container_wrap">
<div id="container">
<div id="content">123<br/><br/><br/></div>
</div>
</div>
<div id="footer">
<div class="tail"></div>
</div>
</div>
</body>
</html>
마진값을 #header와 #footer의 높이값 만큼 #container_wrap에서 빼주고 (margin:-50px auto -116px;), #container에서 패딩값을 주시면 100% 인식됩니다.
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>하단100%</title>
<style>
* {margin:0; padding:0;}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap{width:100%;height:100%;}
#header_wrap{width:100%;height:50px;background:#fff;}
#header{width:100%;height:40px;background:#eee;margin-bottom:10px;position:relative;z-index: 1;}
#header .hslhead{width:900px;height:26px;padding-top:14px;color:#777;margin:0 auto;}
#container_wrap{width:900px;min-height:100%;height: 100%;height:auto !important;margin:-50px auto -116px;}
#container{width:900px;padding:50px 0 116px;margin:0;}
#container:after{display:block;clear:both;content:''}
#content{float:right;width:700px;height:100%;border:1px solid #ddd}
#footer{width:100%;height:100px;margin-top:13px;border-top:3px solid #57b3df;}
#footer .tail{width:900px; height:100px;padding:0; color:#eee; margin:0 auto;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="hslhead"></div>
</div>
<div id="container_wrap">
<div id="container">
<div id="content">123<br/><br/><br/></div>
</div>
</div>
<div id="footer">
<div class="tail"></div>
</div>
</div>
</body>
</html>
마진값을 #header와 #footer의 높이값 만큼 #container_wrap에서 빼주고 (margin:-50px auto -116px;), #container에서 패딩값을 주시면 100% 인식됩니다.
