Html 当内容以不同分辨率调整大小时，如何使页脚始终位于底部

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

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

例如：

以1366x768分辨率查看站点页面始终处于视图中，如：

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

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

我希望你能帮助我，我考虑过媒体查询，但我不确定这是否是最好的解决方案，如果是的话，如何实际查询它们才是最好的

---

谢谢你的时间，我感谢你的帮助

我认为将页脚固定在底部不是一个好做法，因为这样会隐藏内容，最坏的情况是，如果窗口高度小于导航高度+页脚高度，则没有空间容纳任何内容

在本例中，如果您真的想将页脚移动到底部，如果窗口高度大于您的网站高度，我宁愿使用一些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属性，使其占用浏览器的最小高度。

谢谢，我们来看看这篇文章！