html - 背景色未扩展到高度

我在:hover上显示了更多文本，因此容器<div>自动更改高度，但background-color不会扩展。请问有什么解决办法吗？

Here是显示问题的jsFiddle。

#related {
  width: 100%;
  left: 0;
  min-height: 360px;
  height: auto;
  background-color: #3f5673;
  color: white;
}
#related .inner {
  width: 63%;
  margin: auto;
  color: white;
}
#related .inner .abox .thumb {
  text-decoration: none;
}
#related .inner .abox .thumb .sgn {
  display: block;
  padding-left: 15px;
  color: #36C7E3;
}
#related .inner a {
  color: white;
}
#related .inner h3 {
  font-size: 25px;
  color: white;
}
#related .inner h4 {
  color: white;
}
#related .inner .col {
  float: left;
  width: 30%;
  margin-right: 30px;
}
#related .inner .col strong {
  padding-left: 15px;
  color: #36C7E3;
}
#related .inner .col p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
#related .inner .col p::after {
  display: block;
  float: right;
  padding-top: 15px;
  content: "..see more..";
  color: #36C7E3;
}
#related .inner .col p:hover {
  overflow: visible;
  width: auto;
  white-space: normal;
  padding: 0;
}
#related .inner .col p:hover:after {
  display: none;
}
#related #references {
  float: left;
  width: 30%;
  margin-right: 30px;
}
#related #didyouknow {
  float: left;
  width: 30%;
  margin-right: 30px;
}
/*------------------------------------------------------*/

#footer {
  float: left;
  left: 0;
  height: 30px;
  width: 100%;
  background-color: #5f5f5f;
  color: white;
  padding-bottom: 20px;
}
#footer hr {
  display: none;
}
#footer .inner .copy {
  padding-left: 15px;
}
#footer .inner .menu li {
  float: right;
  display: inline;
  padding-right: 15px;
}
#footer .inner .menu li a {
  color: white;
}

<section id="related">
  <div class="inner">
    <section class="col" id="news">
      <h3><a href="#">News</a></h3>
      <h4>Some title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus, lacus sed tincidunt mollis, tellus erat mollis sapien, at ullamcorper augue nisi a justo. Praesent et tellus at lorem rhoncus venenatis non id velit. Nullam vestibulum arcu
        quis erat fermentum, sed venenatis arcu tristique. Quisque fermentum nisi sed porta fermentum. Nam tincidunt, ipsum et blandit sodales, turpis enim ultricies erat, a viverra tellus elit vitae enim. Etiam placerat enim orci, nec pulvinar lorem
        vehicula ac. Etiam eget elementum sem. Integer nisi elit, bibendum vitae leo non, posuere tincidunt neque.
      </p>
      <strong>10 Dec 2014</strong>
      <h4>Some title</h4>
      <p>Vestibulum luctus nibh non risus semper consectetur. Sed laoreet eget metus in elementum. Ut mollis faucibus risus a faucibus. Vestibulum eget maximus purus. Maecenas vitae ipsum mattis augue feugiat rutrum. Sed tortor eros, convallis vitae libero
        vitae, commodo lobortis lacus. Duis condimentum consectetur augue, vel pharetra orci aliquam sit amet.</p>
      <strong>5 Jan 2015</strong>
    </section>
    <aside>
      <div id="references" class="abox">
        <h3>References</h3>
        <a class="thumb d2" href="#">
          <q>FitLayout is very useful for obtaining structured data from the web. We use it every dat
                    for obtaining statistical data about the products offered by our competitors.</q>
          <span class="sgn">John Smith</span>
        </a>
      </div>
      <div id="didyouknow" class="abox">
        <h3>Did you know?</h3>
        <a class="thumb d2" href="#">
          <q>The FitLayout pattern matching algorithms save time and money in the specification phase.
                    The designers may focus on the main problem instead of manually designing complex extraction
                    templates.</q>
        </a>
      </div>
    </aside>
  </div>
</section>
<footer id="footer">
  <div class="inner">
    <hr>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="copy">Copyright © 2016 FITLayout. All rights reserved.</div>
  </div>
</footer>

最佳答案

问题不是背景色，而是元素大小。您需要强迫父母伸展到孩子的身高：

#related {
    ...
    overflow: hidden;
}

Demo

关于html - 背景色未扩展到高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36412246/