当内容使用不同的分辨率调整大小时，如何将页脚始终保持在底部

Question

我为我的一个朋友建了一个网站。你可以看到它here。

事情是我希望页面的底部实际上位于网站的底部。并且图像会以另一种分辨率调整大小。

示例：

以1366x768分辨率观看该网站，该网页始终在here内查看：

但是当我打开一个更高的高分辨率（1280x1024）时它看起来像this

正如您所看到的，页面底部和网站底部之间有很多空间。 我希望它保持像1366x768分辨率总是“全场”，图像在更高的高度变大，“页脚”总是在页面的底部。就像一个动态的全屏页面。

我希望你能帮助我，我想到了媒体查询，但我不确定这是否是最好的解决方案，如果是这样，最好是如何查询它们。

感谢您的时间，感谢您的帮助！

Answer 1

我认为将页脚固定到底部是一种很好的做法，因为它会隐藏内容，如果窗口高度小于导航高度，最坏的情况将不会占用任何内容空间+页脚高度。

在这种情况下，如果你真的想将页脚移到底部，我宁愿使用一些javascript来为内容添加填充底部（在这种情况下是滑块），如果窗口高度大于你的网站高度：

var windowHeight  = window.innerHeight;
var websiteHeight = parseInt(window.getComputedStyle(document.body).height);

if (windowHeight > websiteHeight) {
    var diff = windowHeight - websiteHeight;
    document.getElementById('slider').style.paddingBottom = diff+'px';
}

将它放在一个函数中并在body onload中调用它。请注意，如果将鼠标悬停在鞋子上，内容高度将会增加，并且会进一步向下移动页脚。这就是为什么在响应式设计中你通常不会垂直修复，而是让内容高度成为一个灵活的变量......

另一种方法是在内容上使用CSS min-height属性，使其占用最小量的浏览器高度。