加载动态内容后调用函数

Question

我的主要 objective 是放置一个位于底部的页脚。如果内容高度超过屏幕高度，我的页脚代码工作正常，但当到达内容较少的页面时，它显示页脚和屏幕底部之间存在巨大差距。所以我动态获取内容高度然后放置它。

$(window).on('load', function() {
    console.log(window.innerHeight);
    console.log($(".content").height());
    alert("hi");

    if((window.innerHeight - $(".content").height()) < 70 ) $("footer").css({"position": "absolute", "top": window.innerHeight-90});
});

如果在页面加载后在 google chrome 控制台中使用此代码，它可以完美运行，但是当放在代码中时，$(".content").height() 给出一个常量值。

Answer 1

您不需要使用 JS 执行此操作。

您可以在 css 中使用 flex-box 并强制最小高度始终以 vh 单位填充视口。

.Site {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

header { background-color: lime; }

footer { background-color: red; }

<body class="Site">
  <header>header content</header>
  <main class="Site-content">site content</main>
  <footer>footer content</footer>
</body>

加载动态内容后调用函数

Calling a function after dynamic content is loaded

html

javascript

css

jquery

footer