Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<title>study css and div</title>
<style type="text/css">
#container{
width:1002px;
background-color: grey;
}
#header{
width:1002px;
height:120px;
background-color:red;
}
#main{
width:1002px;
height: 700px
background-color:green;
}
#lside{
float:left;
width:700px;
height:700px;
background-color:purple;
}
#rside{
float:left;
width:302px;
height:700px;
background-color:pink;
}
#footer{
width:1002px;
height:120px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="header"></div>
<div id="main">
<div id="lside"></div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</body>
</html>
上边的代码可以正常显示footer部分的， 可有个问题， 如main部分的内部高度有变化呢？一般就要删除main中的高度：height: 700px;这行， 变成：
Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<title>study css and div</title>
<style type="text/css">
#container{
width:1002px;
background-color: grey;
}
#header{
width:1002px;
height:120px;
background-color:red;
}
#main{
width:1002px;
background-color:green;
}
#lside{
float:left;
width:700px;
height:700px;
background-color:purple;
}
#rside{
float:left;
width:302px;
height:700px;
background-color:pink;
}
#footer{
width:1002px;
height:120px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="header"></div>
<div id="main">
<div id="lside"></div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</body>
</html>
这样就会有另一个问题， footer部分不显示了， 解决方法：在footer的css中加一行clear:both;让footer层与上边的左/右两边层不重叠:
Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<title>study css and div</title>
<style type="text/css">
#container{
width:1002px;
background-color: grey;
}
#header{
width:1002px;
height:120px;
background-color:red;
}
#main{
width:1002px;
background-color:green;
}
#lside{
float:left;
width:700px;
height:700px;
background-color:purple;
}
#rside{
float:left;
width:302px;
height:700px;
background-color:pink;
}
#footer{
width:1002px;
height:120px;
background-color:yellow;
clear:both;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="header"></div>
<div id="main">
<div id="lside"></div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</body>
</html>
或者将clear:both;改成float:left;