内容和页脚重叠,没有将页脚推到底部
Content and Footer overlapping and not pushing footer to bottom
谁能告诉我为什么我的内容和页脚重叠,为什么内容不会把页脚推到底部。
除了这两个问题,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>
从#footer
中删除position: absolute;
#footer {
width: 100%;
height: 140px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
bottom: 0;
left: 0;
}
也许我不明白你需要什么,但你考虑过改变吗?
#footer-content {
height: 85%;
#footer-content {
height: 60px;
或者简单地在#footer
和#body
上尝试overlay:auto;
或overlay:hidden;
相关文章:
- 将视口底部滚动到元素底部
- HTML5页面底部棒
- HighCharts长标题文本在某些元素上重叠
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 如何检测重叠元素下的单击
- 将jQuery放在代码的底部
- javascript跨浏览器确定用户是否滚动到页面底部
- 停止较大单词的重叠
- javascript移动交叉浏览器确定用户是否滚动到页面底部
- FullCalendar:事件发生时阻止重叠.标题是一样的
- 如何将图表放在顶部和底部
- 在页脚处停止固定侧边栏-防止重叠
- JS图表和html表格重叠
- 如何摆脱"压缩/块”;PHP页面底部的注释
- 如果同一页面上有多个谷歌地图,单击任何标记都会突出显示最底部的地图标记
- 引导数据偏移量底部
- 使用两个重叠的画布,我可以将鼠标事件传递到底部的画布吗
- 在扩展中,管理最小化了底部水平的窗口,而不是重叠
- 内容和页脚重叠,没有将页脚推到底部
- 顶部Y轴与底部Y轴重叠