3

我试图将页脚放在页面底部，但收效甚微。

我只能粘贴链接，因为那里有很多 CSS，我不确定我的问题出在哪里。

所以这是链接：Test ; 如果有人愿意帮助我，我将不胜感激。

编辑：这个问题是旧的，网址不再存在，但是当个人需要将页脚（或任何其他元素）定位到页面底部（所谓的粘性页脚）时，答案可能被认为是有效的。

4

4 回答 4

9

I have actually used this solution lately. It works very well. And if you have dynamic content inside the footer you can easily make a script which on resize or orientation change changes the height of the footer and the margin on the body.

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px; //same height as the margin to the bottom of the body
}
于 2014-05-03T09:49:15.290 回答
2 
#footer {
      margin-top: -50px;
}

从 #footer {} 定义中删除它。此外，由于您希望它是相对的，因此您必须增加页脚上方 div 的高度，直到它到达屏幕的末尾。否则，您将不得不使用绝对定位。

编辑：还从#footer 中删除“位置：相对”

编辑2：发布我在萤火虫上看到的所有定义。

footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    clear: both;
    height: 50px;
    position: relative;
    width: 100%;
}

footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

footer {
    display: block;
}

您可以使用 "display:block" 删除第一组定义和最后一组定义。如果你能在某个地方找到它们。

于 2012-05-06T11:49:22.970 回答
2

使用 css 表：

FIDDLE1 - 内容很少

FIDDLE2 - 小内容 + 大页脚

FIDDLE3 - 大量内容

标记

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}
于 2014-05-01T12:38:14.337 回答
-4

尝试添加

.footerClass {
     position:absolute;
     bottom:0;
}

到您的 css 文件并将类 footerClass 添加到您的页脚标签

于 2012-05-06T11:49:10.240 回答