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