在三条水平线中拆分div-box背景

Question

我有以下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-box：

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

这里有一个jsfiddle：https://jsfiddle.net/4dnykjof/

我尝试将div-box背景分成三种不同颜色。这可能吗？我希望如此，每个颜色区域都有相同的高度。我尝试了很多，但没有做任何事情。

EIDT：我不能使用树div框，因为我需要div框中间的内容，我有内容。但是这个内容的高度比div框的1/3大。 （参见编辑过的jsfiddle）

我想要的图片：

谢谢！我很感激你的帮助。

Answer 1

试试这个 - 我确定这是一种更简单的方法，但这可以为您提供所需的输出 - 3个相等高度的条纹，垂直居中的文字和与条纹重叠的文字：

＆＃13;

＆＃13;

#footer {
  position: relative;
  height: 99px;
  background: transparent;
  color: #282828;
  margin-bottom: 5em;
  text-align: center;
  font-size: 64px;
}
#footer p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
#footer .copyright {
  display: inline-block;
  padding-top: 0.60em;
  letter-spacing: 0.05em;
  color: #999;
  color: rgba(255, 255, 255, 0.5);
}
#background {
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
#top,
#middle,
#bottom {
  height: 33.3334%;
}
#top {
  background: #ff9f65;
}
#middle {
  background: #b5b5b5;
}
#bottom {
  background: #82c051;
}

＆＃13;

<div id="footer">
  <div id="background">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
  </div>
  <p>This is my Text here</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

难道你不能排列三个div，然后编辑它们的高度，使它们等于你的内容div吗？至于不同的背景颜色，只需使用css。将id添加到每个div并将其用作css中的选择器，并使用属性“background-color”，值为您的颜色或十六进制颜色。如果这没有帮助，请用您的问题的重新评论进行评论。

Answer 3

掀起一些超级基本的东西，应该是你需要的东西。如果要为中心文本进行更多自定义，请将其包装在另一个DOM元素中。大多数更改涉及CSS，更新的HTML如下。 https://jsfiddle.net/hkbgtazL/

<div id="footer">
    <div class="red"></div>
    <div class="white text-content"> Some Content Here </div>
    <div class="blue"></div>
</div>

如有疑问，请使用更多div：D