粘性页脚与粘性标题? [英] Sticky footer with sticky header?
本文介绍了粘性页脚与粘性标题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以使用粘性页眉创建粘性页脚?
Is it possible to make sticky footer with sticky header?
一切都很好,但是当我应用粘性标题时,我需要使 body { padding-top:60px; }
,使其不与内容重叠。
Everything works great but when I apply sticky header I need to make body { padding-top: 60px; }
for it to not overlap with content. The problem then is that my footer goes down below the page.
小提琴: http://jsfiddle.net/NFpDG/
<div class="wrap">
<div class="header">STICKY HEADER</div>
<div class="content">CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />
</div>
<div class="push"></div>
</div>
<div class="footer">STICKY FOOTER</div>
CSS
CSS
html, body, .wrap {
height: 100%;
}
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -60px;
/* for sticky footer to not go below page */
padding-top: 60px;
/* for sticky header to not overlap content */
}
.push, .footer {
height: 60px;
}
.footer {
background-color: green;
}
.content {
background-color: yellow;
}
.header {
background-color: blue;
height: 60px;
width: 100%;
position: fixed;
top: 0;
}
推荐答案
将 padding-top:60px; 添加到
.content
而不是 .wrap
?
jsFiddle: http:// jsfiddle .net / NFpDG / 2 /
jsFiddle: http://jsfiddle.net/NFpDG/2/
这篇关于粘性页脚与粘性标题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文