html - 为什么我的网站底部有多余空间？

Question

我正在尝试自学构建响应式网站。我正在使用 Zurb 的 Foundation 6，并且实际上已经设法建立了一个简单的网站，但我在页面底部的间距方面遇到了问题。

问题区域出在我页面的“分页”和“页脚”部分。

可以在 test.allvixen.com 上看到该站点，我的代码如下所示:

<div class="large-12 columns">
    <center>
            <nav class="pagination">
            <ul>
                <li><a href="" rel="nofollow">&laquo; First</a></li>
                <li><a href="" rel="nofollow">&lsaquo; Back</a></li>
                <li>1</li>
                <li><a href="" rel="nofollow">2</a></li>
                <li><a href="" rel="nofollow">3</a></li>
                <li><a href="" rel="nofollow">4</a></li>
                <li><a href="" rel="nofollow">5</a></li>
                <li><a href="" rel="nofollow">6</a></li>
                <li><a href="" rel="nofollow">7</a></li>
                <li><a href="" rel="nofollow">8</a></li>
                <li><a href="" rel="nofollow">9</a></li>
                <li><a href="" rel="nofollow">10</a></li>
                <li><a href="" rel="nofollow">11</a></li>
                <li><a href="" rel="nofollow">12</a></li>
                <li><a href="" rel="nofollow">13</a></li>
                <li><a href="" rel="nofollow">14</a></li>
                <li><a href="" rel="nofollow">15</a></li>
                <li> . . . </li>
                <li><a href="" rel="nofollow">94</a></li>
                <li><a href="" rel="nofollow">95</a></li>
                <li><a href="" rel="nofollow">96</a></li>
                <li><a href="" rel="nofollow">Next &rsaquo;</a></li>
                <li><a href="" rel="nofollow">Last &raquo;</a></li>
            </ul>
        </nav>
  </div>

  <div class="large-12 columns">
  <div id="footer">
        &copy; 2013 - <a href="http://allvixen.com/">allvixen.com</a>
        </div>
        </center>

        </div>

我不知道如何减少或缩小页面分页和版权声明之间的差距。我也想不通为什么我在版权声明下方有这么多空间。

有人可以就我做错了什么或在哪里可以了解有关此特定问题的更多信息以及如何纠正它提供一些建议吗？

Answer 1

columns 类的最小高度为 350px。这导致您的最后一个列元素比它应该的要大。

对于您不想设置最小高度的列，请输入min-height:0px;。

例子:

.columns:last-child {
  min-height:0px;
}