为什么我的内容和页脚之间存在巨大差距？

Question

我在页面上有两列浮动到左侧，并包含在一个名为“内容”的包装div中。

然后我在#footer中包含了一个页脚。我的内容和页脚之间存在巨大差距，我无法弄清楚原因！这是指向codepen和相关代码的链接：

http://codepen.io/Pea92/pen/WvrXRY

HTML：

<div id="content">
<div class="sidebar">Information etc</div>
<div class="column2"></div>
</div>
<div id="footer"></div>

CSS：

.sidebar {
float:left:
width:20%;
}
.column2 {
float:left;
width:60%;
}

Answer 1

您遇到语法错误：

<div class="clear" <div="" id="footer">
        <p>© Copyright 2015</p>

    </div>

您没有关闭<div代码...请始终验证您的代码。 http://validator.w3.org/

Answer 2

我认为你错过了结束＆gt;对你明确的div。或者无论如何，页面底部的代码有问题。缺少一些东西，纠正你的代码。

<div class="clear"
      <div id="footer">
        <p>&copy; Copyright 2015</p>

    </div>


  </body>

Answer 3

This is known bug, there is something wrong with the balancing algorithm of the multicol layout: https://code.google.com/p/chromium/issues/detail?id=297782