0

I would like to calculate a responsive margin-top for the footer of a navigation - it should always be placed 50px over the bottom. I wrote this code but it doesn't work - anybody can help me?

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

This is the stylesheet for the elements so far, pretty basic.

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

I really need this to be done with jQuery - no CSS solutions. Sorry!

4

4 回答 4

0

我的代码... 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>
于 2013-11-14T17:17:41.843 回答
0

好吧，@Ennui 下面的 CSS 解决方案应该适用于您的 jQuery 尝试，如下所示：

(function () {
$(window).resize(function () {
    $("nav").css("position", "relative");
    $("nav footer")
        .css("position", "absolute")
        .css("bottom", "0px")
        .css("height", "50px");
}).resize(); });
于 2013-11-14T16:34:39.180 回答
0

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

nav {
    position: relative;
}

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

任何具有relativeorabsolute位置的元素都会重置其后代元素的偏移父级，这意味着您可以nav相对于nav文档而不是文档来定位包含在内部的元素。

于 2013-11-14T16:18:05.833 回答
0

你只需要css！

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

完毕！;)

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

于 2013-11-14T16:07:47.033 回答