gpt4 book ai didi

javascript - 加载动态内容后调用函数

转载 作者:行者123 更新时间:2023-11-30 15:44:29 25 4
gpt4 key购买 nike

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

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

最佳答案

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

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

.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>

关于javascript - 加载动态内容后调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40291815/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com