Question

我在尝试让我的主容器（白色背景）延伸到内容的底部时遇到问题，它目前仅在标题中运行。我已经绞尽脑汁了很长时间，我尝试过添加一个明确的，并确保主容器内的所有容器都浮起但仍然没有快乐。

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

查看

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

任何帮助都会很棒。

感谢。

容器的CSS代码：

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

Answer 1

问题在于使用所有float：left指令。如果所有作为块元素的元素都是块元素，则不需要它们。例如，h1中的header元素不是块元素。似乎某处是h1 {display: inline} - 例如全球。如果你在浏览器的检查器中将其覆盖为h1 {display：block}，则白色背景“正在增长”;-)。所以我的提示：删除所有浮动指令，然后重新开始编写。

记住：漂浮是邪恶的; - ）

如果你真的需要，请使用它。例如，如果您需要两个主要div元素彼此相邻。另外考虑使用溢出....

编辑：错误在div id="content"中。删除float:left并运行

这就是我对邪恶的浮动元素的意思; - ）

Answer 2

尝试添加：

<div class="clear"></div>

在“page-wrap”div的末尾。

Answer 3

更准确的答案是

<div style="clear:both"></div>

因为他没有提到他是否有一个名为clear

的课程

“在”page-wrap“div的末尾。”

CSS容器问题 - 后台未运行全长

3 个答案: