我有一个网站，我不想做出响应，并为正文和页脚设置了最小宽度（1024px），这样它在移动设备上和在桌面上看起来一样。正因为如此，当在手机上垂直查看网站时，内容不会占据整个页面，所以我想让页脚粘在页面底部。
问题：
在移动设备上，垂直查看网站时，页脚不会推到屏幕底部，而是只推到内容底部，就好像没有应用粘性页脚代码一样。它可以在我的MacBook和iPad上使用，但不能在我的iPhone或小米Redmi上使用。我猜这是因为移动设备的宽度小于我设置的最小宽度。
代码基本如下（来自mystrd的现代clean-css粘性页脚教程）
<!DOCTYPE html>
<head>
<title>the title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>the nav</nav>
<article>the article</article>
<footer>the footer</footer>
</body>
</html>
CSS是
html {
position: relative;
min-height: 100%;
}
body {
min-width: 1024px;
width: 100%;
margin: 0 0 100px;
}
footer {
min-width: 1024px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
}
我的网站是http://www.collectthis.com.au我在哪里应用了这个确切的代码。它在MacBook和12英寸iPad上运行得很好，但在iPhone上却不是这样。正如你所看到的，页脚在屏幕的一半以上。
我也尝试过Ryan Fait的粘性页脚代码，但也不起作用。任何帮助都将不胜感激！
如果需要，可以使用vh（视口高度），0vh表示"视口高度的0%"，100vh表示"视口高的100%"
我刚刚把bottom: 0改成了top: Calc(100vh - 100px);（100px是页脚的高度），Calc是CSS3函数，所以它在旧浏览器上不起作用。
html {
position: relative;
min-height: 100%;
}
body {
min-width: 1024px;
width: 100%;
margin: 0 0 100px;
}
nav{
background-color: blue;
}
footer {
min-width: 1024px;
width: 100%;
position: absolute;
left: 0;
top: Calc(100vh - 100px);
height: 100px;
background-color: orange;
}<head>
<title></title>
</head>
<body>
<nav>Nav...</nav>
<article>Article...</article>
<footer>footer...</footer>
</body>它在我的电脑上运行，在我的安卓手机上似乎也能运行。
我希望这就是你想要的。
可以对css的其余部分进行更多的了解。
当我尝试这个时
html {
position: relative;
min-height: 100%;
}
body {
width: 100%;
margin: 0 0 100px;
}
footer {
min-width: 1024px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
height: 100px;
}
（去掉你身体上的宽度，改变页脚中的绝对值-固定值，它会得到你想要的结果。但在不知道还有什么的情况下，我无法为你做更多的事情。