Question

我想计算一个导航页脚的响应边距 - 它应该总是放在底部50px。我写了这段代码，但它不起作用 - 任何人都可以帮助我吗？

(function () {
$(window).resize(function () {
    var navHeight = $("nav").height();
    $("nav footer").css({ "margin-top": navHeight - 50 });
}).resize(); });

到目前为止，这是元素的样式表，非常基本。

nav { position:fixed; top:0; left:0; width:320px; height:100%; padding:100px 0 0 0; }
nav footer {  }

我真的需要用jQuery来完成 - 没有CSS解决方案。遗憾！

Answer 1

你只需要css！

.nav.footer {
    position: fixed;
    bottom: 50px;
}

完成！;）

示例代码：http://jsfiddle.net/QKLQx/

Answer 2

您可以在纯CSS中执行此操作：

nav {
    position: relative;
}

nav footer {
    position: absolute;
    bottom: 0px;
    height: 50px;
}

任何具有relative或absolute位置的元素都会重置其后代元素的偏移父元素，这意味着您可以将nav中包含的元素相对于nav而非文档。

Answer 3

以下@Ennui的CSS解决方案应该与您的jQuery尝试一起使用，如下所示：

(function () {
$(window).resize(function () {
    $("nav").css("position", "relative");
    $("nav footer")
        .css("position", "absolute")
        .css("bottom", "0px")
        .css("height", "50px");
}).resize(); });

Answer 4

我的代码...... http://jsfiddle.net/7rHeR/

也许我们不明白你的问题...或者你真的不知道你想要什么......

希望这有帮助！

<强> JS：

function getNavFooterDistance() {
    var distance = $(".nav.footer").offset().top - $(".nav").offset().top;
    console.log("Distance " + distance + "px" );
}

$(function() {
    $(window).resize(function () {
        getNavFooterDistance();
    });

    getNavFooterDistance();
});

<强>的CSS：

.nav {
    position:relative;
    width: 100%;
    height:100%;
    background-color: blue;
}
.nav .footer {
    position: absolute;
    bottom: 50px;
    height: 50px;
    width: 320;
    background-color: red
}

<强> HTML：

<div class="nav">
    <div class="nav footer"></div>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>

jQuery - 计算元素的响应边际

4 个答案: