有人可以告诉我为什么我的内容和底部重叠，为什么内容不会将页脚推到底部。
除了这两个问题，background-overlay 和 background-gradient 似乎实际上并没有设置为 100%，因为如果内容扩展到很远，它们就会停止让黑色背景暴露。
我在这里有它的现场版本：http: //jordan.rave5.com/tmp/
更新：
CSS：
* {
margin: 0;
}
body, html {
position:relative;
border: 0px;
margin: 0px;
padding: 0px;
height:100%;
width:100%;
background-color: #000;
color: #BCBCBC
}
#background-overlay {
z-index: 100;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-color: #273722;
background-image: url(images/main-bg.png);
background-repeat: repeat;
background-attachment: fixed;
opacity: 0.0;
top: 0;
bottom: 0;
}
#background-gradient {
position: relative;
z-index: 200;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-image: url(images/main-grad.png);
background-repeat: repeat-x;
background-position: top;
}
#header {
display: none;
z-index: 1000;
position: absolute;
width: 100%;
height: 80px;
top: 0;
left: 0;
-moz-box-shadow: 0px 0px 40px #555;
-webkit-box-shadow: 0px 0px 40px #555;
box-shadow: 0px 0px 40px #555;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=40, Direction=0, Color='#555555')";
}
#header-image-grad {
z-index: 300;
transition:width 2s;
-webkit-transition:width 2s;
width: 100%;
max-height: 608px;
background-image: url(images/gray-trans.png);
background-repeat: repeat;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#header-image-border {
z-index: 400;
transition: width 2s;
-webkit-transition: width 2s;
width: 100%;
max-height: 608px;
padding-bottom: 4px;
background-image: url(images/border.png);
background-repeat: repeat-x;
background-position: bottom;
}
.image-grad {
position: absolute;
z-index: 600;
width: 100%;
height: 324px;
min-height: 174px;
max-height: 608px;
background-image: url(images/header-img.png);
background-repeat: repeat-x;
background-position: bottom;
top: 4px;
left: 0;
}
.header-img {
position: relative;
z-index: 500;
width: 100%;
min-width: 1024px;
opacity: 0.0;
}
#header-container {
z-index: 600;
width: 100%;
height: 80px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
opacity: 0.5;
}
#navigation-container {
z-index: 1000;
width: 75%;
min-width: 1024px;
padding: 0px;
margin: 0 auto;
}
#navigation {
z-index: 1000;
height: 80px;
line-height: 80px;
width: 600px;
height: 100px;
}
.nav {
z-index: 1000;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
#body {
transition: height 2s;
-webkit-transition: height 2s;
width: 74%;
min-width: 1024px;
height: auto !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 300px;
background-color: #080908;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#body-content {
display: none;
height: 100%;
}
#footer {
width: 100%;
height: 140px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
position: absolute;
bottom: 0;
left: 0;
}
#footer-content {
height: 100px;
width: 74%;
min-width: 1024px;
margin: 20px auto 20px;
background-color: #96a381;
padding: 10px;
color: #10120f;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
/* STYLE ELEMENTS */
p {
margin: 15px 0 15px;
}
.loading, .loading img {
margin: 0 auto;
margin-top: 5px;
text-align: center;
}
HTML：
<div id="background-overlay">
<div id="background-gradient">
<div id="header-image-grad">
<div id="header">
<div id="header-container">
<div id="navigation-container">
<div id="navigation">
<span id="nav">Navigation Area...</span>
</div>
</div>
</div>
</div>
<div id="header-image-border">
<img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
<div class="image-grad"></div>
</div>
</div>
<div id="body">
<div id="body-content"></div>
<div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
</div>
<div id="footer">
<br />
<div id="footer-content">
Footer Area...
</div>
</div>
</div>
</div>