HTML5和CSS中的粘性页脚问题

Question

这是我的代码：

<footer>

<div id="footer">
<div class="footer-column" id="footer_column1">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav>
</div>
  <div class="footer-column" id="footer_column2"> 
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav>
</div>
  <div class="footer-column" id="footer_column3">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav></div>
  <div class="footer-column" id="footer_column4">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav>
</div>

</div>
</footer>

我使用HTML5和CSS创建了粘性页脚。

和CSS：

#footer {
   position:absolute;
   clear:both;
   bottom:0;
   color:#000;
   width:100%;
   height: 100px;
   background:#fff;
   margin-top:100px;
   left:0;

}
.footer-column {
  float: left; /* Push the div as far up-left as it can be put */
  width: 25%; /* Make sure to subtract the padding */
  padding: 10px; /* We want padding on all sides to make things look nice */
  text-align:center;
}

.footer-column .footer-link ul li
{
    list-style-type:none;
    display:block;
}

和css for wrap is，#wrap{width:100%;}现在页面看起来像这样，http://s28.postimg.org/qrt1vysy5/Untitled_1_copy.png。

我可以知道，为什么我无法设置粘性页脚的正确高度？

任何人都可以帮我解决这个问题吗？

Answer 1

This link should help you figure it out

相关代码：

#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}