Javascript 将div框背景拆分为三条水平线

我有以下css文件：

#footer
{
    position: relative;
    padding: 2em 5em 1.5em 5em;
    background: #44494D;
    color: #FFF;
    margin-bottom: 5em;
}

#footer .copyright
{
    display: inline-block;
    padding-top: 0.60em;
    letter-spacing: 0.05em;
    color: #999;
    color: rgba(255,255,255,0.5);
}

然后这个div框：

<div id="footer">
blabla
</div>

布拉布拉

这里有一个JSFIDLE：

我尝试将div-box背景水平分割成三种不同的颜色。这可能吗？我希望每个颜色区域都有相同的高度。我试了很多，但什么也没做

eIDT：我不能使用树div框，因为我需要在div框中间的内容，我有内容。但此内容的高度大于div框的1/3。（参见编辑的JSFIDLE）

我想要的图片：

---

谢谢大家!！非常感谢您的帮助。

您能否将三个div对齐，然后编辑它们的高度，使它们与您的div的内容相等？对于不同的背景色，只需使用css即可。向每个div添加id，并将它们用作css中的选择器，并使用属性“background color”和作为颜色或十六进制颜色的值。如果这没有帮助，请用你的问题的重新措辞来评论。

创造了一些超级基本的东西，这应该是你需要的。如果要对中心文本进行更多自定义，请将其包装到另一个DOM元素中。大多数更改都涉及CSS，下面是更新的HTML

这里有一些内容

---

如果有疑问，请使用更多divs:D

试试这个-我相信有一个更简单的方法，但这会提供您想要的输出-3条等高条纹、垂直居中的文本和与条纹重叠的文本：

#页脚{
位置：相对位置；
高度：99px；
背景：透明；
颜色:#282828 ;；
边缘底部：5em；
文本对齐：居中；
字体大小：64px；
}
#页脚p{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
#页脚。版权所有{
显示：内联块；
垫面：0.60em；
字母间距：0.05em；
颜色：#999；
颜色：rgba（255，255，255，0.5）；
}
#背景{
位置：绝对位置；
身高：100%；
排名：0；
右：0；
底部：0；
左：0；
z指数：-1；
}
#顶部，
#中间,，
#底部{
身高：33.3334%；
}
#顶{
背景：#ff9f65；
}
#中间的{
背景：#b5；
}
#底部{
背景:"82c051 ;；
}

这是我的文本

< /代码>为什么不只有3个不同的div，每个都有不同的背景色？因为我需要在我的div框中有内容，它在中间，但大于整个高度的1/3。所以为什么不在你的页脚div中嵌套3个div，中间的一个保存内容呢？我想我不是很确定你想要什么，用更多的信息更新你的问题，我可以帮助你更多（也许一个简单的模型会有帮助？）。我仍然不完全理解你的问题。我真的认为你应该发布一个你想要的简单的绘图，它会立即清理这个库，这会清理它很多，就像我说的，我需要有“每个颜色区域[具有]相同的高度”是的，所以使用css使其他分区的高度与中心分区的高度相同，内容…我看不到变化。。？
<div id="footer">
    <div class="red"></div>
    <div class="white text-content"> Some Content Here </div>
    <div class="blue"></div>
</div>