CSS怎么让页脚紧贴页面底部
这篇文章主要讲解了“CSS怎么让页脚紧贴页面底部”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么让页脚紧贴页面底部”吧！
HTML 代码
下面是 HTML 代码的基本结构，footer 标签在 wrap 标签的外面。
<!--Example Source Code--><div id="wrap"><div id="main" class="clearfix"></div></div><div id="footer"></div>
页面内容可以放在 main 标签的内部。例如，下面是两列悬浮页面布局的 HTML 代码；
<!--Example Source Code--><div id="wrap"><div id="main" class="clearfix"><div id="content"></div><div id="side"></div></div></div><div id="footer"></div>
Header放在wrap的里面，main的上面，如下所示；
<!--Example Source Code--><div id="wrap"><div id="header"></div><div id="main" class="clearfix"></div></div><div id="footer"></div>
如果你需要在 wrap 或者 footer 的外面放一些元素，他们必须使用绝对位置；否则，页面上计算好的 100% 的高度会被弄乱掉。
CSS 代码
下面的 CSS 代码使页脚紧贴在页面的底部。
/Example Source Code/
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer /
#footer {position: relative;
margin-top: -150px; / negative value of footer height */
height: 150px;clear:both;}
你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap 的 height 属性把自己拉伸至窗口全部高度的尺寸，负的 margin 会把 footer 提高到 main 的 padding 的位置上去，因为 main 已经在 wrap 的里面，所以 main 的 padding 已经是 wrap 100% 高度的一部分。 这样，footer 就留在页面的底部了。 现在还不算完成，我们还需要去 clearfix main。
Clearfix Hack to the Rescue
多数 SS designers 对 Clearfix Hack 很熟悉，它解决了很多元素悬浮的问题，在这里，我们用它使得 Google Chrome 里面的页脚紧贴页面底部。它同时也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列，sidebar 放在另一列，不会出现个别浏览器下面 main 里面的悬浮的内容导致页脚浮上来的情况。 下面的代码也加入到我们的 stylesheet 里面去；
/Example Source Code/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
*html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
如果你比较喜欢 Ryan Fait 的方法，添加额外的 push，在多列悬浮的页面中，同样需要用到 clearfix。
需要了解的内容
高度和边距
Header，wrap 或者 main 标签内部，如果对一些元素使用 top 或者 bottom margin，可能会出现 footer 被向下移动的现象，移动距离一般是所用的 margin 的高度。这种情况下，可以使用 padding 替代 margin 来填充元素间隙。在页面内容少的情况下，footer 本来应该在页面的底部，窗口的滚动条告诉你 footer 在页面底部偏下的位置。找到那个捣乱的 margin，并用 padding 替换掉。 为 main 声明padding 的时候要多加小心，如果你添加了这样的代码：padding:0 10px 0 10px，你就覆盖了那个至关重要的本来应该和 footer一样的 padding。Google Chrome 中，在页面内容很多的情况下，footer就会和你的页面内容重叠在一起。
字体的大小
设置字体大小的时候，如果你使用相对尺寸，要注意有些访问者可能会在显示器配置中使用较大字体。如果 footer 下面没有剩余足够的空间来容纳大字体，页面高度的设置就会被破坏，从而导致 footer 下面有多余的空隙。所以，请使用 绝对大小(px)，不要使用pt或者 em。
感谢各位的阅读，以上就是“CSS怎么让页脚紧贴页面底部”的内容了，经过本文的学习后，相信大家对CSS怎么让页脚紧贴页面底部这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是蜗牛博客，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论