다음과 같이 가로 200, 세로 200인 녹색 div가 있다고 하자.
HTML 코드는 아래와 같다. (MORE 클릭)
<html lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>해봐라</title>
<style>
<!--
div#box
{ width:
200; height:
200; background:
#b7d84b; }
-->
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
창의 크기가 변해도 아래처럼 꽉 차야 한다.
이렇게 했을 경우 div는 화면에서 보이지 않는다. 높이가 지정되지 않았기 때문이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>해봐라</title>
<style>
html,
body {
margin:
0;
padding:
0;
}
#box_1
{
width:
100%;
background:
#b7d84b;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function
divToFit() {
var
$body = $(this.ie6 ? document.body :
document);
$('#box_1').css({
height: $body.height()
});
}
$(document).ready(function(){
divToFit();
$(window).resize(function() {
divToFit();
});
});
</script>
</head>
<body>
<div id="box_1" class="box"></div>
</body>
</html>
그런데 완벽하지 않은데 일정 크기 이하로 줄이면 스크롤바가 생긴다는 것.
CSS만으로 구성한 것은 다음과 같다. (MORE 클릭)
<html lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>해봐라</title>
<style>
<!--
html,body {
margin:
0;
padding:
0;
}
div
{
border:
0px solid #000000;
-moz-box-sizing:
border-box; /*
Firefox */
-webkit-box-sizing:
border-box; /* Safari
*/
box-sizing:
border-box; /* CSS3
Standard */
}
div#box
{
height:
100%;
background:
#b7d84b;
}
-->
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
장점은 IE6에서도 잘 돌아간다는 것이고, 단점은 IE의 경우 오른쪽에 스크롤바가 항상 생긴다는 것이다.
