div的背景颜色不起作用

Question

我的一个Div元素表现得非常奇怪。当我在div中写一些内容时，它会显示它的背景颜色（坚持文字）。但如果我不写任何东西，背景颜色就会消失。

带文字的图片：

没有文字的图片：

这是html代码：

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: bebas;
}
header {
  max-width: 960px;
  height: 80px;
  margin: 0 auto;
  line-height: 80px;
}
#leftRuler {
  width: 15%;
  height: 80px;
  float: left;
  background: #f3af9d;
}
#bannerContent {
  width: 70%;
  height: 80px;
  float: left;
  background: #e8603c;
  line-height: 80px;
}
#rightRuler {
  width: 15%;
  right: 80px;
  background: #f3af9d;
  float: left;
}
#logo {
  height: 80px;
  float: left;
  font-size: 40px;
  display: block;
  color: #e8603c;
}
#menu {
  float: right;
}
#menu ul {
  padding: 0px;
  margin: 0px;
  float: right;
}
#menu ul li {
  display: inline-block;
}
#menu ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #b9b9b9;
  margin-left: 20px;
}
#menu ul li a:hover {
  border-bottom: 2px solid e8603c;
}
#menu ul li .current {
  border-bottom: 2px solid e8603c;
  color: e8603c;
}

＆＃13;

<header>

  <div id="headerContent">
    <div id="logo">
      JETRO
    </div>
    <nav id="menu">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#" class="current">Blog</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </nav>
  </div>

</header>

<section id="banner">
  <div id="leftRuler">

  </div>
  <div id="bannerContent">
    Blog
  </div>
  <div id="rightRuler">

  </div>

</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

没有内容，那是＆＃34;＃rightRuler＆＃34; div没有高度，所以没有显示。

设置高度或在其中添加至少&npsp;个字符

Answer 2

请详细说明你想要的输出。

根据我的理解你想要正确div的背景色也对吗？

所以为此你只需要改变你的css，如下所示：

#rightRuler {
    width: 15%;
    right: 80px;
    background: #f3af9d;
    float: left;
}

更正了css：

#rightRuler {
    width: 15%;
    height: 80px;
    background: #f3af9d;
    float: left;
}

在右边的地方提高度。