Question

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

$(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});
});

如果在加载页面后在谷歌浏览器控制台中使用此代码，它可以很好地工作，但是当放在代码中时，$(".content").height()会给出一个常量值。

Answer 1

你不需要用JS做这件事。

您可以使用flex-box在css中执行此操作，并强制min-height始终使用vh单位填充视口。

＆＃13;

.Site {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

header { background-color: lime; }

footer { background-color: red; }

＆＃13;

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

＆＃13;

加载动态内容后调用函数

1 个答案: