Question

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

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

所以这就是链接：Test;如果有人想帮助我，我会很感激。

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

Answer 1

我最近实际使用过this解决方案。它工作得很好。如果您在页脚中有动态内容，则可以轻松制作一个脚本，在调整大小或方向更改时会更改页脚的高度和正文上的边距。

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
}

Answer 2

#footer {
      margin-top: -50px;
}

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

编辑：同时从#footer

中删除“position：relative”

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

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”删除最后一组定义。如果你能在某个地方找到它们。

Answer 3

使用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
}

Answer 4

尝试添加

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

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

如何相对于页面底部定位页脚/元素？

4 个答案:

标记

CSS