footer完美至底

来源：互联网发布：淘宝网店买卖交易平台编辑：程序博客网时间：2024/04/27 19:56

示例源码请移步github托管的PerfectFooterToBottom

sticky-footer实现footer完美至底：

http://ryanfait.com/html5-sticky-footer/, http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

sticky-footer.css代码如下：

@CHARSET "UTF-8";* {margin: 0;}html, body {height: 100%;}.wrapper {min-height: 100%;height: auto !important; /*除非你需要IE6的支持*此行与下一行是没有必要的*/height: 100%;margin: 0 auto -155px; /*下边距为页脚的高度的负值*/}.footer, .push {height: 155px; /*.push必须是相同的高度。.footer*/}/*Sticky Footer by Ryan Faithttp://ryanfait.com/*/

结合bootstrap实现更佳效果：http://www.bootcss.com/

另外， 想要更好效果， 还可以用到jquery-ui-bootstrap框架里面的jquery-ui-bootstrap/assets/css/docs.css， 在docs.css里面有如下footer样式：

/* * Footer * * Separated section of content at the bottom of all pages, save the homepage. */.bs-footer {padding: 30px 0;color: #777;text-align: center;border-top: 1px solid #e5e5e5;background-color: #f5f5f5;}.bs-footer p {    margin-bottom: 0;    color: #777;}.footer-links {  margin: 10px 0;  padding-left: 0;}.footer-links li {  display: inline;  padding: 0 2px;}.footer-links li:first-child {  padding-left: 0;}/* 平板电脑和小屏电脑之间的分辨率 */@media ( min-width : 768px) {.bs-footer {text-align: center;}.bs-footer p {margin-bottom: 0;}}/* 横向放置的手机和竖向放置的平板之间的分辨率 */@media ( max-width : 767px) {.bs-footer {padding: 15px 0;text-align: center;}.bs-footer p {margin-bottom: 0;}}/* 横向放置的手机及分辨率更小的设备 */@media ( max-width : 480px) {.bs-footer {padding: 8px 0;text-align: center;}.bs-footer p {margin-bottom: 0;}}

用法示例如下：

<html>    <head>        <link rel="stylesheet" href="layout.css" ... />    </head>    <body>        <div class="wrapper">            <p>Your website content here.</p>            <div class="push"></div>        </div>        <div class="footer">            <p>Copyright (c) 2008</p>        </div>    </body></html>

footer.jsp或footer.html(ps:本人习惯把header和footer部分用另外文件存放， 在需要的地方再引用，

 如 <jsp:include page="common/footer.jsp" /> 或 <%@include file="common/footer.jsp"%>)

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!-- Footer================================================== --><footer class="bs-footer footer"><div class="container"><div class="row"><p>Copyright &copy; 2014 GDITC微社区, All Rights Reserved</p><ul class="footer-links"><li><a href="http://blog.csdn.net/Cryhelyxx">Blog</a></li><li class="muted">·</li><li><ahref="http://blog.csdn.net/Cryhelyxx">Issues</a></li></ul></div></div></footer>

效果如下：

OK, Enjoy it!!!

0 0