Question

编辑：将position:fixed用于pageHeader，pageBody和pageFooter （然后纠正他们的位置）为我做了。谢谢你们！

我正在使用HTML和CSS开发Android Web应用程序。我目前有这个：

#container {
 min-height:100%;
 position:relative;
}

#pageHeader {
 color:<%=foreColor%>;
}

#pageBody {
 padding-bottom:100px;
}

#pageFooter {
 position:static;
 clear:both;
 bottom:0;
 height:5%;
}

我设法使用此功能将页脚粘贴到页面底部，但是当主体长度超过页面高度时，页脚不会向下滚动到页面底部（它会粘到页面的底部）页面高度）因此低于屏幕的身体部分与它重叠。

我正在使用这种HTML结构：

<div id="container">
  <div id="pageHeader"></div>
  <div id="pageBody"></div>
</div>
<div id="pageFooter"></div>

[如果影响任何内容，我的pageBody中也有一个标题，正文，页脚ID]

Answer 1

Ryan Faits CSS Sticky footer长期以来一直是实现粘性页脚的标准方法。

http://ryanfait.com/sticky-footer/

除非我误解你，你想要制作一个固定的页脚（它一直位于屏幕的底部）

在这种情况下，只需设置position:fixed而不是static

Answer 2

这都是你的CSS吗？

pageFooter使用此CSS自然应位于页面底部，因为div按顺序互相跟随，并且不会从页面流中删除。

那就是说position:relative;没有任何定位，而position:static在这个例子中似乎没有做任何事情。也许他们导致移动浏览器窒息。尝试删除它们。

如果正文变长，页面底部的CSS页脚将不会向下滚动

2 个答案: