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

时间:2015-06-15 13:38:10

标签: html css footer

我在页面上有两列浮动到左侧,并包含在一个名为“内容”的包装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%;
}

3 个答案:

答案 0 :(得分:1)

您遇到语法错误:

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

    </div>

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

答案 1 :(得分:0)

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

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

    </div>


  </body>

答案 2 :(得分:0)

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