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

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

Answer 2

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

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

还有其他事情可以确保您获得正确的身高：

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

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

2 个答案: