그래야 푸터는 항상 밑에 .. 헤더는 항상 위에 ..
섹션 컨테이너 안의 내용물이 많건 적건 ..
https://mulder21c.github.io/2014/10/25/100-percent-height-layout/
Markup
<!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" />
<title></title>
</head>
<body>
<div id="header">
Header Area
</div>
<div id="wrapper">
<div id="container">
컨테이너
</div>
</div>
<div id="footer">
Footer Area
</div>
</body>
</html>
CSS
html, body{
margin:0;
padding:0;
height:100%;
}
#header{
position:relative;
height:100px;
z-index:1;
}
#wrapper{
margin:-100px 0 -100px;
min-height:100%;
}
* html #wrapper{
height:100%;
}
#container{
padding:100px 0 100px;
}
#footer{
position:relative;
height:100px;
z-index:1;
}근데 래퍼에 마진 바텀을 왜 주는 건진 이해가 잘 안간다 ..
