0

我的页脚设计为留在页面底部，即使它上面的 div 只有少量内容。它直到最近才起作用，我似乎以某种方式破坏了它。你能看看吗？

提前致谢。

CSS：

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font: 100% Helvetica, sans-serif, Arial, sans-serif;
    color: #000;
    background-color: #FFF;
    background-image: url(images/BGmain.png);
    background-repeat: repeat-x;
}
/*----------
Div styles
----------*/
#container {
    min-height: 100%;
    position: relative;
}
.header {
    padding: 0 0 230px 0;
    text-align: center;
    background-image: url(images/BGlogo_55top.png);
    background-repeat: no-repeat;
    background-position: top;
}
.column1 {
    padding-bottom: 50px;
    width: 960px;
    margin: 0 auto;
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;           
    text-align: center;
}
/*----------
Other
----------*/
.plainimg {
    border-style: none
}
/*----------
Text styles
----------*/
p {
    font-size: 80%;
    color: #333;
    line-height: 150%;
    text-align: left;
    padding: 1px 15px 1px 15px;
}
h1 {
    font-size: 100%;
    color: #000;
    padding: 0;
}
h2 {
    font-size: 100%;
    font-weight: 500;
    color: #000;
    padding: 0;
    text-align: center;
}
/*----------
Links
----------*/
a.navlink:link, a.navlink:visited {
    text-decoration: none;
    display: inline-block;
    color: #F1F1F1;
    width: 120px;
    text-align: center;
    padding: 0 0 3px 0;
    font-size: 80%;
}
a.navlink:hover, a.navlink:active {
    text-decoration: none;
    display: inline-block;
    color: #FFF;
    background-color: #000;
    width: 120px;
    text-align: centre;
    padding: 0 0 3px 0;
    font-size: 80%;
}
a:link, a:visited {
    text-decoration: none;
    color: #AEAEAE;
}
a:hover, a:active {
    text-decoration: underline;
    color: #999
}

div排列如下：

<div id=container>
<div class=header></div>
<div class=column1></div>
<div class=footer></div>
</div>
4

4 回答 4

0

看看这个： http: //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

当它在过去对我造成破坏时，我通常在内容中有一些东西是罪魁祸首 - 填充、无效标记等。如果您发布指向页面的链接，您可能会找到更具体的答案。

于 2010-06-27T15:13:16.653 回答
0

正如 Jason McCreary 所说，您需要为htmlCSS 添加高度。

利用：

html 
{
    height:     100%;
    margin:     0;
    padding:    0;
}

在您的页面上，由于某种原因，这会触发一个无关的滚动条。

更新：
滚动条似乎是由.footer h6.
添加：bottom: 2.5ex;并且样式line-height: 1;似乎footer可以清除这一点。

但更好的方法是使用CSS reset。

在没有重置的情况下，至少添加：

.footer h6 {
    margin: 0;
    padding: 0;
}

.

CSS 重置还将最小化跨浏览器的变化，这种变化会破坏平台之间的布局。

于 2010-06-28T00:17:13.667 回答
0

这是你的问题：

#container {
min-height:100%;
position:relative;
}

这是修复：

#container {
min-height:100%;
}

好东西：

http://www.w3schools.com/Css/pr_class_position.asp

于 2010-06-28T00:27:34.163 回答
0

解决了。简单的解决方案只需将您​​的页脚部门放在您的容器部门之外。

<div id=container>
    <div class=header></div>
    <div class=column1></div>
</div>
<div class=footer></div>
于 2010-06-28T00:30:05.233 回答