0
我有一个div标签，里面有内容，我希望它可以展开，所以我的页脚总是跟着它。事实上，我的内容标签没有扩展，我的页脚与我的内容重叠。我怎样才能让div扩大并推下我的页脚？如何使DIV标签伸展到其孩子的尺寸？
这里是我的HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="Stylesheet" href="images/Main.css"" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="header">
<div class="logo" id="logo"></div>
<div class="socialNetworkingButtons"> </div>
<div class="languageSelector"><a href="#"></a></div>
<div class="headerBanner"></div>
<div class="icons"></div>
<div class="hr"><hr /></div>
</div>
<div class="content" id="home">
<div class="videoBox"><img class="largeBlock" height="500" /></div>
<div class="description"></div>
<div class="keyFeatures"></div>
</div>
<br class="clear" />
<div class="footer">
<div class="copyright"><p>Here is some text</p></div>
</div>
</div>
</form>
</body>
</html>
我的CSS：
html, body {
width: 100%;
height: 100%;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
background: #fff;
margin: 0;
padding: 0;
}
img, div {
border: none;
}
span {
margin:0;
padding: 0;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
.clear {
clear: both;
}
/* contains all content on the page */
.container {
width: 100%;
height: 100%;
position: relative;
top: 0px;
clear:both;
}
/* begin header css */
.header {
position: relative;
top: 0px;
left: 33px;
width: 956px;
height: 290px;
display: block;
}
.logo {
position: relative;
top: 0px;
left: 0px;
width: 143px;
height: 83px;
}
.socialNetworkingButtons {
position: absolute;
top: 9px;
left: 836px;
width: 120px;
height: 42px;
text-align:right;
}
.languageSelector {
position: absolute;
top: 51px;
left: 646px;
width: 310px;
height: 32px;
text-align: right;
}
.headerBanner {
position: absolute;
top: 83px;
left: 0px;
width: 956px;
height: 127px;
}
.icons {
position: absolute;
width: 956px;
height: 64px;
left: 0px;
top: 210px;
text-align:center;
}
.icon {
width: 149px;
height: 47px;
display: inline;
position: relative;
}
hr {
color: #AF0837;
background-color: #AF0837;
height: 7px;
width: 939px;
margin: 0 auto;
border: 0px;
}
div.hr {
position : absolute;
top: 275px;
left: 0px;
width: 956px;
height: 6px;
}
/* end header css */
/* begin content css */
.content {
position: relative;
margin-top: 6px;
width: 956px;
display: block;
float: left;
margin-left: 43px;
clear:both;
}
.videoBox {
position: relative;
float:left;
width: 615px;
height: 328px;
}
.title {
position: relative;
float:right;
top: 0px;
width: 341px;
height: 30px;
font-size: 16px;
font-weight: bold;
}
.description {
position: relative;
float:right;
top: 30px;
width: 341px;
height: 206px;
}
.keyFeatures {
position: relative;
float:right;
width: 341px;
height: 102px;
}
/* end content css */
/* begin footer css */
.footer {
position: relative;
width: 956px;
height: 170px;
left: 33px;
top: 20px;
display:block;
clear:both;
}
.copyright {
background-color: #AF0837;
width: 100%;
height: 45px;
}
.copyright p{
width: 100%;
height: 45px;
text-align: right;
margin-top: 10px;
color: #fff;
}
/* end footer css*/
将'overflow：hidden'赋给'.content'来清除浮动。并且只能发布你的CSS的相关部分，你发布的代码太多了！ – bfavaretto 2012-04-13 19:21:12