如何制作粘性页脚 [英] how to make a sticky footer
问题描述
如何制作粘性页脚我已经在google上试过了一些结果,但没有得到具体的结果,所以在这里我做了一些粗略的模型,以深入了解这些事情,我有三个div #header #container , #footer 。 所以如果我将删除#容器比footer不应该去任何应该在他的永久位置稳定的任何地方。 用简单的方法解释每个人都会很容易理解... 请参阅我的小提琴: http://jsfiddle.net/dZDUR/5/ 高度:100%至 HTML $ b 检查 http://jsfiddle.net/dZDUR/8/ How to make a sticky footer i have tried on google found some results but didn't get the exactly how this is working so here i have made some rough mockup to understand the things deeply i have three div's #header, #container, #footer. So if i will remove the #container than footer should not be go anywhere that should stable on his permanent location. explain with simple method everyone will understand easily... see the my fiddle:-http://jsfiddle.net/dZDUR/5/ Give height:100% to HTML Check this http://jsfiddle.net/dZDUR/8/ 这篇关于如何制作粘性页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
html,body
& 主容器
。当您将 height:100%
改为 .container
时,它将按下页脚
&在那之后,我们从顶部给 margin
>
html,body {
height:100%;
}
.header {
background:red;
width:500px;
height:100px;
}
.container {
background:yellow;
width:500px;
身高:100%;
}
.footer {
background:green;
width:500px;
height:100px;
margin-top:-100px;
}
< div class =container>
< div class =header>
< / div>
< / div>
< div class =footer>
< / div>
html, body
& main container
. When you give height:100%
to .container
it's push down the footer
& after that we give footer
margin
from the top same as his height
. Like this: html,body{
height:100%;
}
.header {
background:red;
width:500px;
height:100px;
}
.container {
background:yellow;
width:500px;
height:100%;
}
.footer {
background:green;
width:500px;
height:100px;
margin-top:-100px;
}
<div class="container">
<div class="header">
</div>
</div>
<div class="footer">
</div>