Html 在移动视图中将页脚保持在页面底部

我用html和css制作了一个网站。该网站在桌面和笔记本电脑视图中表现完美，但当我在mobile biew中测试它时，页脚表现不正常，它不会显示在页面底部，而是保留在页面底部上方的某个位置。我的正文和页脚样式表如下：

html{
  overflow-x:hidden;
}

body {
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#303036;
  margin:0px;
  background:url('../images/main.jpg');
  background-repeat:repeat;
  min-width:1100px;
  position: relative; 
  height:100%;
}

footer {
  color: white;
  width:100%;
  padding:0;
  display:block; 
  clear:both;
  bottom:0;     
}

---

我是否需要进行任何更改以使页脚保持在移动视图中页面的底部？

在css中，“底部”属性现在对页脚没有任何作用。您需要添加一个“position”属性，以便执行任何操作。根据您希望它如何工作以及包含的标记和样式，您可以使用

position:absolute

或

position:fixed

。两者都将从文档流中删除您的元素，但它们在这一点上做的事情略有不同。应用位置属性后，您需要向页脚添加更多样式，以使其看起来符合您的需要。

您的问题与页脚的位置值有关（默认为

display:block；

）。您可以将代码更改为：

footer {
  color: black;
  width:100%;
  padding:0;
  clear:both;
  bottom:0;
  position: absolute; //change here   
}

以及其他确保你获得正确高度的方法：

html{
  overflow-x:hidden;
  height: 100%;
}

---

@user10171583我已经更新了我的答案，如果不起作用，你可以把你的代码放在一个源代码中，比如，然后我们可以更好地调查。