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

Question

我用html和css创建了一个网站。 该网站在桌面和笔记本电脑视图中表现完美，但是当我在移动设备中测试时，页脚的行为不正常，它不会显示在页面底部，而是保留在页面底部的某个位置。 我的身体和页脚样式表如下：

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;     
}

我是否需要进行任何更改才能使页脚停留在移动视图中的页面底部？

Answer 1

您的问题与页脚的位置值有关（默认为display: block; ）。 您可以将代码更改为：

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

还有其他方法可以确保你获得正确的身高：

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

Answer 2

在你的CSS中，“bottom”属性现在没有为页脚做任何事情。 您需要为此添加“位置”属性才能执行任何操作。 根据您希望如何工作以及包含标记和样式的内容，您可以使用position: absolute或position: fixed 。 两者都将从文档流中删除您的元素，但它们之后会略有不同。 一旦应用了position属性，你就需要为你的页脚添加更多样式，以使它看起来你想要的样子。