我正在尝试实现CSS粘贴页脚。
问题是存在内容DIV超出其容器的范围,导致滚动条不理想,并且挂在页面div上的背景图像没有扩展文档的整个高度。
这是我的HTML:
<div id="page"> <div id="header"> <dl> <dt>Header links -</dt> <dd><a href="#">link 1</a></dd> <dd><a href="#">link 2</a></dd> <dd><a href="#">link 3</a></dd> </dl> </div> <div id="content"> <p><a id="modal" href="popup.html" target="_blank">link to popup</a></p> </div> <div id="footer"> <dl> <dt>Footer links -</dt> <dd><a href="#">link 1</a></dd> <dd><a href="#">link 2</a></dd> <dd><a href="#">link 3</a></dd> </dl> </div> </div>
这是CSS:
/*--------------------------------------------------------------- global */ html, body { color:#969696; font-size:100%; height:100%; } body { font:normal 200 70% Arial, Helvetica, Verdana, sans-serif; } a, a:link, a:visited, a:hover, a:active { border-bottom:1px dashed #ff8400; color:#ff8400; text-decoration:none;} a:hover { border-bottom-style:solid;} /*--------------------------------------------------------------- layout */ #page { background:url("../images/bgMain.jpg") repeat-y center top; height:100%; margin:0 auto; position:relative; width:1024px; } dl, dt, dd { float:left; } dd { margin:0 .2em 0; } dd:after { color:#969696; content:"|"; padding:0 0 0 .3em; } dd:last-child:after { content:""; } /*----------------- header */ #header { margin:0 auto; width:726px; } #header dl { float:right; line-height:60px; } /*----------------- content body */ #content { background:#fff; border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; box-shadow:0 0 12px 0 rgba(0, 0, 0, .1); -moz-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1); -webkit-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1); clear:both; height:100%; margin:0 auto; min-height:100%; padding:16px 13px 22px; position:relative; width:700px; } /*----------------- footer */ #footer { clear:both; margin:-22px auto; position:relative; width:726px; } #footer dl { display:inline; margin:0 0 0 13px; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active { border-bottom-color:#969696; color:#969696; }
很棒的 CSS Tricks 网站在其“ 代码段”区域中有一个“粘性页脚”的代码段
http://css-tricks.com/snippets/css/sticky-footer/
或使用jQuery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
演示的最新链接