Question

我有一个网站，我不想要响应并为主体和页脚设置了最小宽度（1024px），因此它在移动设备上看起来与它相同在桌面上。因此，当在移动设备上垂直查看网站时，内容不会占据整个页面，所以我想让页脚粘在页面底部。

问题：
在移动设备上，当垂直查看网站时，页脚不会被推到屏幕的底部，而是仅仅移到内容的底部，就像粘贴一样页脚代码未应用。它适用于我的MacBook和iPad，但不适用于我的iPhone或小米Redmi。我猜测它是由于移动设备的宽度小于我设置的最小宽度的宽度。

代码基本如下（来自mystrd＆＃39; s现代干净的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＆＃34; iPad，但不是在looks like so的iPhone上。正如您所看到的，页脚超出了屏幕的一半。

我也尝试了Ryan Fait的粘性页脚代码，但这也不起作用。任何帮助将不胜感激！

Answer 1

可以更深入地了解你的其他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;
}

（移除你身体的宽度，改变绝对 - 固定在你的页脚中它会得到你想要的结果。但是不知道还有什么，我不能为你做更多的事情。

Answer 2

如果您需要，可以使用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>

它适用于我的电脑，它似乎也能在我的Android手机上运行。

我希望这就是你想要的。

当最小宽度大于屏幕宽度（即移动设备）时，粘性页脚不起作用

2 个答案: