CSS 容器问题 - 背景未全长运行

Question

我在尝试让我的主容器(白色背景)延伸到内容底部时遇到问题，它目前仅在标题中运行。我绞尽脑汁好久了，我试过添加一个 clear 并确保主容器中的所有容器都 float 但仍然没有快乐。

这是一个实时网站，可以在 http://www.ridermagazine.co.uk 查看。

我还注意到我的侧边栏已经下降到内容下方，而不是显示在右侧，这让我相信我的数学有误，但我仔细检查了所有内容，似乎没有任何内容不合适。

任何帮助都会很棒。

谢谢。

容器的 CSS 代码:

#page-wrap {
width: 926px; 
margin: 20px auto;
background-color:#fff;
padding:17px;
}

Answer 1

问题在于使用所有的 float:left 指令。如果所有 block 元素都是 block 元素，则不需要它们。例如 header 中的 h1 元素不是 block 元素。似乎某处是 h1 {display: inline} - 例如全局。如果您在浏览器的检查器中将其覆盖为 h1 {display: block} 白色背景“正在增长”;-)。所以我的建议是:删除所有 float 指令并重新开始组合。

记住: float 是邪恶的;-)

如果你真的需要，就使用它。例如，如果您需要两个主要的 div 元素并排放置。也改为考虑使用 overflow ....

编辑:错误在 div id="content" 中。删除 float:left 就可以了

这就是我对邪恶的 float 元素的意思 ;-)