Question

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

Here是显示问题的jsFiddle。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

问题不是背景颜色，而是元素大小。您需要强制父级伸展到孩子的高度：

$scope.loading = false;

$scope.loadRemedyData = function(qName) {
    //Injects scope from Remedy Database JSON
    $scope.loading = true;
    $http.get("/openremedywos?qName=" + qName)
        .then(function (response) {$scope.newdevices = response.data;});
    $scope.loading = false;
  }

<强> Demo

背景颜色不会扩展到高度

1 个答案: