加载动态内容后调用函数答案

【问题标题】：Calling a function after dynamic content is loaded加载动态内容后调用函数
【发布时间】：2017-03-10 13:31:04
【问题描述】：

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

$(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() 会给出一个常量值。

【问题讨论】：

标签： javascript jquery html css footer

【解决方案1】：

你不需要用 JS 做这个。

您可以在 css 中使用 flex-box 并强制 min-height 始终使用 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>

【讨论】：