html - 背景颜色不会扩展到高度

Question

我在 :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>

Answer 1

问题不是背景颜色，而是元素大小。你需要强制 parent 拉伸(stretch)到 child 的高度:

#related {
    ...
    overflow: hidden;
}

Demo