Javascript 内容和页脚重叠,不将页脚推到底部
有人能告诉我为什么我的content和foter是重叠的,为什么内容不会把页脚推到底 除了这两个问题外,背景覆盖和背景渐变似乎实际上并没有设置为100%,因为如果内容扩展到很远的地方,它们就不会让黑色背景暴露出来 我这里有它的实况版本: 更新: CSS:Javascript 内容和页脚重叠,不将页脚推到底部,javascript,html,css,Javascript,Html,Css,有人能告诉我为什么我的content和foter是重叠的,为什么内容不会把页脚推到底 除了这两个问题外,背景覆盖和背景渐变似乎实际上并没有设置为100%,因为如果内容扩展到很远的地方,它们就不会让黑色背景暴露出来 我这里有它的实况版本: 更新: CSS: * { margin: 0; } body, html { position:relative; border: 0px; margin: 0px; padding: 0px; heig
* {
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;
}
<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>
HTML:
* {
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;
}
<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>
导航区。。。
页脚区域。。。
也许我不明白你需要什么,但你是否考虑改变:
#footer-content {
height: 85%;
到
或者简单地尝试overlay:auto代码>或覆盖:隐藏代码>代码< >页脚>代码>代码>正文> <代码> < p>也许我不明白你需要什么,但是你考虑改变了吗?
#footer-content {
height: 85%;
到
或者简单地尝试overlay:auto代码>或覆盖:隐藏在#页脚
和#正文
上删除位置:绝对代码>来自#页脚
#footer {
width: 100%;
height: 140px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
bottom: 0;
left: 0;
}
移除位置:绝对位置代码>来自#页脚
#footer {
width: 100%;
height: 140px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
bottom: 0;
left: 0;
}
您的页脚位于“背景渐变”框内,即“位置:相对”。因此,页脚的“位置:绝对”偏移将应用于该框,而不是外部页面。使用诸如Firebug或Chrome developer工具之类的诊断工具很容易看到这些东西。我如何在后台容器中实现推式页脚呢?此外,尽管设置为100%的高度,但背景参与者由于某种原因只能伸展到目前为止。如果你想“推”页脚,那么绝对定位是没有意义的。你可能想从一个简单的测试设置开始,而且我对Firebug或Chrome开发工具一无所知。上次我开发的时候我们只有一个验证器和记事本。LOL您的页脚位于“背景渐变”框内,即“位置:相对”。因此,页脚的“位置:绝对”偏移将应用于该框,而不是外部页面。使用诸如Firebug或Chrome developer工具之类的诊断工具很容易看到这些东西。我如何在后台容器中实现推式页脚呢?此外,尽管设置为100%的高度,但背景参与者由于某种原因只能伸展到目前为止。如果你想“推”页脚,那么绝对定位是没有意义的。你可能想从一个简单的测试设置开始,而且我对Firebug或Chrome开发工具一无所知。上次我开发的时候我们只有一个验证器和记事本。LOL问题是#body元素在#footer和#footer内容下拉伸而没有正确下推。问题是#body元素在#footer和#footer内容下拉伸而没有正确下推。谢谢,是的,我现在已经删除了这些。我想我现在唯一的问题是渐变叠加,当页面延伸太远后,渐变就不再重复了。在哪个浏览器中?我穿ChromeThanks很好看,是的,我现在把这些都拿走了。我想我现在唯一的问题是渐变叠加,当页面延伸太远后,渐变就不再重复了。在哪个浏览器中?在我看来,它穿铬合金很好看