边框未完全包围整个 div 元素。

Question

我有一个名为main的类，其中包含整个网站的内容。由于我正在建立网站的初期阶段，我想确保我的代码没有错误，例如缺少闭合标签或闭合引号等。有一件事可以帮助我确保这一点，那就是用彩色边框围绕我的元素。

我的主要

应该被红色边框所包围，但是，边框并没有完全环绕

容器，这告诉我我的标记有问题。我已经尝试了很长时间来解决这个问题，但没有成功。我希望这里的某个人能帮助我排除故障？

http://jsfiddle.net/yvSrB/

- AnchovyLegend

---

为什么不直接使用W3C的HTML验证器呢？ - Andrew Marshall

你的问题出在带有内联样式的 div 上。你将其高度设为 100%。但是，你的容器高度是固定的 1200 像素。因此，这个 div 的高度也是一样的。然而，你还有另一个高度为 134 像素的 #header div，导致你的 div 溢出了 134 像素。 - Jared

原因似乎是<div id="main" style="height:1200px;"> - 移除 height。 - thirtydot

谢谢Jrod，它起作用了。为什么会发生这种情况，是由于标记错误需要清除浮动，还是只是时不时的自然需求？ - AnchovyLegend

这里不需要清除浮动。只有当你使用了 float: left;（或 right）并且想让其他元素完全脱离该元素时，才需要这样做。 - Roddy of the Frozen Peas

Answer 1

您已经将主div的高度设置为内联样式：

<div id="main" style="width:900px; margin-left:auto; height:1200px; margin-right:auto;">

如果您希望它能根据内容自动扩展，那么请删除高度(height)属性，否则它将保持在1200像素的固定高度。

- John Lawrence

Answer 2

您的主要div高度为1200像素，内容大于此宽度，因此边框不显示在溢出的内容上。您可以通过增加高度来检查它是否显示。

- Imran Rashid

Answer 3

我想这并没有回答你的具体问题，但是在调试你的标记和检查其质量方面，你可以使用 holmes.css "CSS 标记侦探" http://www.red-root.com/sandbox/holmes/ 它会突出显示你标记中的潜在错误和错误。将 holmes.css 文件包含在你的开发构建中（或使用该链接提供的书签工具）。

- potench

Answer 4

你的主div的高度为1200像素...移除它，让主div扩展到包含内容的高度。

- Daniel Hunter

Answer 5

如果您在jsfiddle示例中删除背景颜色，您会发现红色边框包裹在“carousel”div下面。这是因为您为“main”div指定了硬编码高度。我不知道这是因为您想要它成为最小高度--在这种情况下，您应该使用min-height--还是因为您想要它成为绝对高度。无论哪种方式，盒子的内容已经溢出其容器，这就是为什么您看不到红色边框底部的原因。

如果您希望“main”具有确切的高度并具有滚动条，请将overflow-y: auto;添加到“main”div的样式中。否则，如上所述，要么完全删除高度声明，要么使用min-height: 1200px;来使“main”div增长以容纳您的内容。

- Roddy of the Frozen Peas