Question

我试图让页脚包装器在高度上扩展以匹配其孩子，但我没有运气。有关如何实现这一点的任何想法？

 <div id="footer">
    <div id="footer-wrapper">
        <div style="float:left; width:160px">
     <strong>TITLE</strong><br/>
      <a href="#">links</a><br/>
      <a href="#">links</a><br/>
          <a href="#">links</a><br/>
     </div>

        <div style="float:left; width:160px">
     <strong>TITLE</strong><br/>
      <a href="#">links</a><br/>
      <a href="#">links</a><br/>
          <a href="#">links</a><br/>
     </div>
    </div>
</div>


#footer {
  width: 100%;
  background: transparent url(../images/bgfooter.jpg) no-repeat top center;
  background-color: #363732;
  border-top: 5px solid #2c2d29;
  clear: both;/*Clears all columns and sets the footer at the bottom*/
}

/*--Set footer width and center--*/
#footer-wrapper {
  color: #9c9b9a;
  width:800px;
  margin: 0 auto;
  padding: 10px 0px 10px 0px;
  height: auto;
 }

Answer 1

您可以将display: inline-block;添加到#footer

示例：http://jsfiddle.net/RE997/

Answer 2

<div id="footer-wrapper">

<div style="float:left; width:160px">
<strong>TITLE</strong><br/>
<a href="#">links</a><br/>
<a href="#">links</a><br/>
<a href="#">links</a><br/>
</div>

<div style="float:left; width:160px">
<strong>TITLE</strong><br/>
<a href="#">links</a><br/>
<a href="#">links</a><br/>
<a href="#">links</a><br/>
</div>

<div class="clear"></div>
</div>
<style>

#footer {
  width: 100%;
  background: transparent url(../images/bgfooter.jpg) no-repeat top center;
  background-color: #363732;
  border-top: 5px solid #2c2d29;
  clear: both;/*Clears all columns and sets the footer at the bottom*/
}

/*--Set footer width and center--*/
#footer-wrapper {
  color: #9c9b9a;
  width:800px;
  margin: 0 auto;
  padding: 10px 0px 10px 0px;
  height: auto;
 }

 .clear
 {
    clear: both;
 }

</style>

请使用此代码

Answer 3

这是更新的css。我已经为页脚包装器添加了背景颜色作为显示div高度的测试，但它根本没有显示

#footer {
  width: 100%;
  background: transparent url(../images/bgfooter.jpg) no-repeat top center;
  background-color: #363732;
  border-top: 5px solid #2c2d29;
  clear: both;/*Clears all columns and sets the footer at the bottom*/

}

/*--Set footer width and center--*/
#footer-wrapper {
  color: #9c9b9a;
  width:800px;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
  height: auto;
  background-color:#666666;


 }

无法将子div高度自动调整为父级

3 个答案: