如何解决页脚未粘贴到页面底部
| 在此页面上使用Google Chrome浏览器时:http://wilwaldon.com/solage/special_offers.html页脚位于第一个特别优惠的下方。由于某些原因,它似乎在FF中工作正常。 在其他页面上,它位于底部。例如(http://wilwaldon.com/solage/resort.html)。 即使页脚html在两个页面上位于同一位置,也会发生这种情况。 我找到了罪魁祸首,但似乎无法弄清楚如何解决问题,而又不会弄乱整个网站的大部分内容。 这是罪魁祸首的CSS的pastebin:http://pastebin.com/vmBL8nUc 这是页脚CSS的pastebin:http://pastebin.com/5rmDnSDT 这是html文件的pastebin:http://pastebin.com/fvV5wdjE 任何帮助将不胜感激。解决方法
有两种方法可以使页脚固定在底部,我更喜欢使用以下方法:
与其在内容div之后粘贴页脚,不如从\“ Bottom up \\”开始工作。这应该更适合跨浏览器使用,
确保您有一个包装器div,其中包含所有内容。
给包装器div以下css属性:
height:auto;
position:relative;
确保您的内容div和页脚div在包装div中。
使用CSS指定内容div的高度(通过查看代码,您已经完成了此操作)
最后,为页脚div提供以下属性:
clear:both;
bottom:0px;
position:absolute;
现在,当您指定此页脚的高度时,它将从底部向上。
,因此,正如您所指出的,罪魁祸首是容器.contenttop
设置了高度,这导致页脚在该容器的“底部”运行。问题在于容器正在显示它的溢出,从而使页脚看起来在错误的位置。
您有两个选择。
1)我将删除.contenttop
的height属性。这样可以使内容自然地流动,就像您期望的那样。在special_offers.html页面上,看起来可以解决该问题。
2)如果由于某种原因无法删除高度,则必须使用一些JavaScript来动态设置.contenttop
容器的高度。如果这是您需要走的路,我可能会考虑重新考虑您的前端代码。
希望有帮助!
,当您说“网站的多数”时,具体发生了什么?与解决此问题相比,删除该高度并解决所产生的问题可能会更快。
另外,如果需要,您是否可以在其他页面上覆盖该高度?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。