CSS 容器问题 - 背景未完整运行答案

【问题标题】：CSS Container Issue - Background not running full lengthCSS 容器问题 - 背景未完整运行
【发布时间】：2023-04-09 09:42:01
【问题描述】：

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

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

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

任何帮助都会很棒。

谢谢。

容器的 CSS 代码：

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

【问题讨论】：

如果您希望其他人回答，您必须显示您的 CSS 代码
@awenkhh 我已经为容器添加了代码，你还需要吗？
@DaveBurns 尝试将 padding 和 margin 设置为 0px 并告诉我你得到了什么？
你的html有严重错误，包含多个id同名的内容。
@sємsєм 发生了什么错误，您能告诉我哪些 id 具有相同的命名内容吗？此外，我将 Margin 和 Padding 都设置为 0，但什么也没发生。

标签： css background containers

【解决方案1】：

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

记住：float 是邪恶的 ;-)

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

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

这就是我对邪恶浮动元素的意思；-)

【讨论】：

这有效，但我的侧边栏仍显示在内容下方，这是浮动的问题吗？也非常感谢您的帮助，当我学习 CSS 时，我被告知要始终浮动所有内容，但显然这不是解决方案 :)
uhh ...浮动一切听起来都像是与魔鬼共舞;-)。这不是正确的方法。所有元素都有定义的行为。所以有 div 元素的行为显示：块。因为人们期望它们占据可用的全部位置，但受属性宽度的限制。在导航放置在右侧内容旁边的情况下，您有一种情况，您可以使用 float 将两个 div 元素放在同一行。但也许对两个元素都使用 display:inline-block 并告诉使用 IE 6 和 7 的人去获取更新的浏览器是一种更好的方法 ;-)
我仍然有很多问题，我无法让侧边栏显示在右侧内容的顶部，它要么位于底部，要么位于最旧的文章旁边，它在 tbh 中让我头疼:(
我一起写了一个小要点，你可以在这里找到：https://gist.github.com/4055233我希望它有助于弄清楚它是如何工作的......
谢谢老兄，这对我很有帮助:)

【解决方案2】：

尝试添加：

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

在“page-wrap”div 的末尾。

【讨论】：

恐怕一点作用都没有。
现在已经修复，事实上#content在不需要的时候是浮动的，因此它现在可以在包装器末尾有或没有明确的情况下工作:)

【解决方案3】：

更准确的答案是

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

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

“在“页面换行”div 的末尾。”

【讨论】：

这不能解决问题
无意冒犯！是的，它可以工作——但这只是对创建的不太好的 CSS 样式表的修复。问题在于许多 float:left 指令。如果您花时间在浏览器的 CSS 检查器中删除其中的一些，并返回块元素（如 h1）“块”，则不需要 clear:both。添加太多“猫”元素总是一个坏主意。您包含在 HTML 代码中的 div 元素没有页面的任何信息。这只是一种解决方法，没有必要......再次......没有冒犯;-)
问题不在于如何整理 HTML，而在于如何简单地进行此测试来解决问题 W3C Validator 显示有许多问题需要解决，但同样，这不是问题。
感谢大家花时间回答我的问题，我正在研究的主题实际上是 HTML5 线框，因此我可以尝试学习一些 CSS3 和 HTML5。当我学习 CSS 时，我被告知浮动是我的朋友，我应该始终浮动所有内容 :) 我不完全确定为什么验证器说我在 H1 标签上使用 display:inline，因为它没有出现在样式表本身？
等待有人真的告诉你浮动所有东西？他们应该被枪杀，死了。这比告诉某人使用表格作为设计更糟糕。