(我正在寻找 HTML/CSS 修复，但如果真的没有，那么 JS(最好是 JQuery)对我有用)
我的页面中有两个主要的 div，我有 #maincontent 和 #footer。
基本上，我希望页脚始终位于页面底部:
#footer{
position:fixed;
bottom:0;
}
但我不希望它在页面太小时溢出#maincontent。 为了这个问题，页面可以被认为很简单:
<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>
我的问题是我可以做一个或另一个，要么我将它固定到页面底部，但是当我制作视口(viewport) < (footer + maincontent) 时，页脚位于内容的顶部。我希望页脚始终位于页面底部，但在覆盖主要内容之前消失在页面之外。
最佳答案
使用 jQuery 向页脚添加一个类，当视口(viewport)太小时将其更改为 position: absolute。
$(document).ready(function() {
var height = $(window).height();
function windowHeight() {
height = $(window).height();
}
windowHeight();
$(window).resize(function() {
windowHeight();
});
if (height < 600) { //arbitrary height value you can set yourself
$('#footer').addClass('not-fixed');
} else {
$('#footer').removeClass('not-fixed');
}
});
关于javascript - 将页脚位置更改为页面底部，直到它到达内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21463296/