如何制作粘性页脚 [英] how to make a sticky footer

问题描述

如何制作粘性页脚我已经在google上试过了一些结果，但没有得到具体的结果，所以在这里我做了一些粗略的模型，以深入了解这些事情，我有三个div #header #container ， #footer 。 所以如果我将删除＃容器比footer不应该去任何应该在他的永久位置稳定的任何地方。

用简单的方法解释每个人都会很容易理解...

请参阅我的小提琴： http://jsfiddle.net/dZDUR/5/

解决方案

高度：100％至 html，body & 主容器。当您将 height：100％改为 .container 时，它将按下页脚&在那之后，我们从顶部给 footer margin > height 。像这样：

  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; 
} 
  

HTML $ b

 < div class =container> 
< div class =header> 
< / div> 
< / div> 
 
< div class =footer> 
< / div> 
  

检查 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, 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;
}

HTML

<div class="container">
    <div class="header">
</div>
</div>

<div class="footer">
</div>

Check this http://jsfiddle.net/dZDUR/8/

这篇关于如何制作粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！