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

【问题标题】：Why is there a huge gap between my content and my footer?为什么我的内容和页脚之间存在巨大差距？
【发布时间】：2015-06-15 22:45:11
【问题描述】：

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

然后我有一个包含在#footer 中的页脚。我的内容和页脚之间有一个巨大的差距，我不知道为什么！这是codepen和相关代码的链接：

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

【问题讨论】：

【解决方案1】：

你有一个语法错误：

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

    </div>

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

【讨论】：

【解决方案2】：

我认为您错过了清晰的 div 的结束 >。或者无论如何，页面底部的代码有问题。有什么遗漏，更正你的代码。

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

    </div>


  </body>

【讨论】：

【解决方案3】：

这是已知的bug，multicol布局的平衡算法有问题：https://code.google.com/p/chromium/issues/detail?id=297782

【讨论】：