jQuery-计算元素的响应裕度

我想为导航的页脚计算一个响应的页边顶部-它应该总是放在底部50像素的位置。我写了这段代码，但它不起作用-有人能帮我吗

(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解决方案。对不起

你只需要css

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

完成；）

---

示例代码：

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

nav {
    position: relative;
}

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

---

任何具有

relative

或

absolute

位置的元素都会重置其子元素的偏移父元素，这意味着您可以将

nav

中包含的元素相对于

nav

而不是文档进行定位。

，@Ennui提供的以下CSS解决方案应与您的jQuery尝试配合使用，如下所示：

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

我的代码。。。

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

希望这有帮助

js:

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

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

    getNavFooterDistance();
});

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

<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>

css:

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

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

    getNavFooterDistance();
});

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

<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>

html:

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

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

    getNavFooterDistance();
});

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

<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>

bla
bla
bla
bla
bla
bla
bla

bla
bla
bla
bla
bla
bla
bla

bla
bla
bla
bla
bla
bla
bla

这将把页脚与导航的其余部分分开-这不是我想要的。很抱歉即使这样也会扰乱结构——我真的需要用jQuery来完成这项工作。很抱歉您只需在调整大小事件处理程序中使用jQuery将这些样式动态添加到

nav

和

footer

。否则，我们需要查看

nav

和

footer

以及任何其他相关元素的标记和CSS，因为定位

footer

的理想方法将取决于标记和CSS。我开始编写代码的方式对我来说几乎是最佳解决方案。如果这个代码能工作，那对我来说就是最好的了。谢谢@user2825956对，我理解-但是你能发布

nav

和

footer

中存在的HTML标记结构及其相应的CSS定义吗？用于定位的各种属性（例如

top

和

margin top

）的效果根据上下文CSS属性（例如

display

、

position

、元素及其祖先的

float

属性等）的不同而显著不同。如果没有这个上下文信息，很难排除故障。现在他用CSS更新了他的帖子，我看这个解决方案不会完全起作用-因为

nav

是

position:fixed

它不会像

相对的
或
绝对的
定位元素那样设置偏移/定位上下文。他所需要做的就是添加一个完整的高度
位置：相对
内部
nav
，该位置包裹
页脚
和
nav
内容的其余部分，然后它就会起作用。