css - 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 是，#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;}