这是我的页脚代码,如何让它显示在页面底部而不是在我上面的内容下面呢?
/*footer */ #footer .column { float: left; width: 25%; } #footer .column div { margin: 5px; height: 200px; background: #eeeeee; } <div id="footer"> <div class="column"><div></div></div> <div class="column"><div></div></div> <div class="column"><div></div></div> <div class="column"><div></div></div> </div>
注意:这不需要是固定的页脚
解决方法
有两个主要选择:
>固定页脚 – 页脚始终显示在页面底部
>推脚 – 即使内容未填满窗口,页脚也会被推到页面底部
两者中较容易的是固定页脚.
固定页脚
为了固定页脚,在CSS中将页脚的位置设置为固定位置:固定并将页脚放置在页面底部的底部:0px.这是CSS-Tricks的代码片段.
#footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); }
推脚
推脚有点棘手.这里是a great graphic,显示了当内容不足时页脚没有停留在页面底部的原因:
基本上,问题正在发生,因为页脚元素被“推”在其上方的元素下面,并且该元素的高度不像页面的高度那么长.为了解决这个问题,你需要确保页脚被“推”到页面的整个高度(减去页脚的高度).
这是怎么做的:
HTML
<div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div>
CSS
html,body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; }
这里有一个更详细的tutorial on how to do it以及上面代码的来源.
这是来自同一来源的working demo of the code.
原文地址:https://www.jb51.cc/html/226772.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。