jQuery - 计算元素的响应边距答案

【问题标题】：jQuery - calculate a responsive margin for an elementjQuery - 计算元素的响应边距
【发布时间】：2013-11-27 17:54:22
【问题描述】：

我想计算一个导航页脚的响应边距顶部 - 它应该始终放置在底部上方 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 解决方案。对不起！

【问题讨论】：

标签： jquery responsive-design margin evaluate

【解决方案1】：

你只需要css！

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

完成！ ;)

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

【讨论】：

这会将页脚与导航的其余部分分开 - 这不是我想要的。对不起！

【解决方案2】：

你可以在纯 CSS 中做到这一点：

nav {
    position: relative;
}

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

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

【讨论】：

即使这样也会扰乱结构——我真的需要用 jQuery 来完成。对不起！
您可以简单地将这些样式动态添加到 nav 和 footer 在您的 resize 事件处理程序中使用 jQuery。否则我们需要查看nav 和footer 以及任何其他相关元素的标记和CSS，因为定位footer 的理想方法将取决于标记和CSS。
我开始编码的方式对我来说几乎是最佳解决方案。如果该代码可行，那对我来说将是最好的。谢谢！
@user2825956 对，我明白了——但你能发布nav 和footer 存在的HTML 标记结构及其相应的CSS 定义吗？用于定位的各种属性（例如 top 和 margin-top）的效果会根据上下文 CSS 属性（例如元素及其祖先的 display、position、float 属性等）而发生巨大变化向前）。如果没有此上下文信息，就很难进行故障排除。

【解决方案3】：

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

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

【讨论】：

现在他用 CSS 更新了他的帖子，我发现这个解决方案不能完全正常工作 - 因为 nav 是 position:fixed 它不会像 relative 或 @ 那样设置偏移/定位上下文987654325@ 定位元素。他需要做的就是在nav 中添加一个完整的高度position:relative 来包装footer 和其余的nav 内容，然后它就可以工作了。

【解决方案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>

【讨论】：