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