Question

我可能会使用绝对和相对错误的术语，但希望你明白我的意思。我想给我的页脚一些＆＃34;底部：10px＆＃34;无论页面内容是否大于或小于浏览器窗口的100％，它都会保留在页面底部。我尝试将它定位为绝对但它将相对于浏览器窗口定位，而不是正文。

这是一个例子：http://public-demo.webflow.com

有什么想法吗？谢谢:)）

Answer 1

将此添加到正文

position: relative

并将其添加到页脚

position: absolute

这样，页脚将相应于身体定位

Answer 2

那应该有用

.footer-text {
    background-color: rgba(0, 0, 0, 0.49);
    bottom: 10px;
    color: white;
    left: 0;
    margin-top: 10px;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 999;
}

Answer 3

如果内容比VIEWPORT小，并且在其他情况下正常，那么就会陷入困境

你需要一个小小的JS。

$(function () {
    var bht = $('body').height();
    var wht = $(window).height();
    if (bht < wht) {
        $('#footer').css("position", "absolute");
        $('#footer').css("bottom", "10px");

    }
});

检查这个小提琴 - http://jsfiddle.net/3N4L9/4/

在任何情况下都要贴到底部

<小时/> 这将根据需要生成相同的输出：

与第1页类似：http://jsfiddle.net/3N4L9/1/

与第2页类似：http://jsfiddle.net/3N4L9/2/

无论内容和滚动如何，它都会在页面底部保持页脚。

.fixedFooter{
    width:100%;
    position:fixed;
    bottom:10px;
}

Answer 4

如果你将底部设置为0px会很好。

如果您想解决此类问题，可以使用Mozilla检查元素，并在那里播放代码。

CSS - 相对于身体底部的位置页脚

4 个答案: