html/body上的100%高度在iPhone上不起作用 我创建了一个使用基础的响应网站，它的页脚绝对位于页面底部。在我的桌面浏览器上，它看起来与应该的完全一样，但在我的iPhone上，页脚与部分内容重叠，而不是一直位于页面底部

我的html、正文CSS设置为：

html, body {
    height:100%;
    margin:0;
    padding:0;
}

但是，当我使用Safari开发者工具在手机上查看页面时，当我将鼠标悬停在html或body标记上时，它并没有一直延伸到页面底部，这就是导致页脚内容重叠的原因

有人知道这是什么原因吗

谢谢

尝试添加

min-height: 100%;
min-width: 100%;

---

对于CSS规则

您可以使用

calc、-moz-calc和-webkit-calc

。例如，假设页脚的高度为

100px

，那么：

html, body, .container{
    height: -moz-calc(100% - 100px);
    height: -webkit-calc(100% - 100px);
    height: calc(100% + 30px - 100px);
    margin:0;
    padding:0;
}

您可以使用：

height: 100vh;

这将是100%的视口高度

---

浏览器兼容性：

您还可以创建特定于屏幕的样式

@media screen {
  html, body {
     height: 100vh;
  }
}

---

有关媒体查询的更多信息，请点击此处

感谢上帝的提问和您的回答。我快疯了。使用

100vh

（和

最小高度：100%；

进行良好测量）并移除额外的集装箱div最终对我有效。谢谢