css嵌套div的多种背景颜色答案

【问题标题】：Multiple background colors for css nested divscss嵌套div的多种背景颜色
【发布时间】：2010-02-07 05:41:23
【问题描述】：

好的。这是这种情况。我创建了一个顶部带有徽标的黑色横幅的网站，其高度为 100 像素，背景颜色为 #000。接下来我想要一个大的“main_content” div 来包含导航以及页面内的任何内容，因此它不会包含页脚。在这种情况下，页面的 main_content 区域中有几个嵌套的 div，并且已经为它们定义了背景颜色。问题是，一旦我将背景颜色应用于名为“main_content”的 div，它只会将其应用于导航栏，然后停止，因为它会运行到已经定义了颜色的嵌套 div。我想知道这里是否缺少 CSS 规则...

我发现的唯一解决方法是我必须为 main_content div 定义一个高度，有没有办法解决这个问题？我不想为内容区域定义高度，因为我希望它与填充它的内容的高度相匹配。

【问题讨论】：

标签： css html background-color

【解决方案1】：

我想我找到了，溢出：隐藏，我不确定这是否是正确的解决方案，但它是我所拥有的最好的解决方案

【讨论】：

【解决方案2】：

最有可能发生的情况是您的其他嵌套 div 正在从其父 main_content div 继承颜色，要解决此问题，您应该为嵌套 div 显式提供颜色。你提到的另一件事是你想根据它的内容将高度应用到 main_content 你可以通过给它一个 100% 的高度来做到这一点，例如：

<style>
#main_content{height:100%;}
</style>

【讨论】：

height:100%; 会使其垂直填充其父级的所有高度，而不是垂直填充其内容的所有高度。