与CSS粘页脚问题
我正在尝试实现一个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("..http://img.dovov.combgMain.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技巧网站，在他们的Snippets区域粘滞页脚片段
或者使用jQuery
与演示的最新的链接
詹姆斯·迪安现代清洁CSS“粘脚”
HTML
<!DOCTYPE html> <head> <title></title> </head> <body> <nav></nav> <article>Lorem ipsum...</article> <footer></footer> </body> </html>
CSS
html { position: relative; min-height: 100%; } body { margin: 0 0 100px; /* bottom = footer height */ } footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; }
在这里演示
显然，您需要更改#footer的规则以包含定义的高度，然后使用与您定义的高度值相等的负边距顶部规则。
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
我几天前写了一个非常干净的CSS页脚，你可能会觉得它很有用。
你会在这个github仓库（ Bredele css sticky footer ）上find两个粘性页脚版本：一个是头文件而另外一个没有。
这两个版本都使用display：table（与IE8一起使用），没有额外的标记，没有clearfix和灵活的内容高度。 此外，标题高度不依赖于内容填充或相关的视口！
希望它会有帮助！
奥利维尔
通过使用摆脱滚动条
overflow: hidden
在他们出现的容器上。
使用以下样式的页脚：
#footer{position:absolute;bottom:0}
这将把它放在屏幕的底部，如果你想在<div id="page">底部添加
#page{position:relative}
那么当你不知道页脚的高度时，比如响应式布局呢？ 是唯一的select使用JavaScript和window.onresize？
