не могу получить высоту div ребенка для автоматической настройки на родителя

Question

не могу получить высоту div ребенка для автоматической настройки на родителя

0

Я пытаюсь, чтобы нижняя колонтитула расширялась в высоту, чтобы соответствовать своим детям, но им не повезло. Любые мысли о том, как я могу это достичь?

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

Ruf1 25 март 2014, в 13:55

Источник

Теги:

html

css

parent-child

3 ответа

Ещё вопросы

Ruf1 · Answer 1 · 2014-03-25T11-52-00.000Z

Вот обновленный 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;


 }

Ankit Agrawal · Answer 2 · 2014-03-25T11-52-00.000Z

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

используйте этот код

В качестве теста, когда я добавляю другой цвет фона к обертке нижнего колонтитула, а не заполняю до высоты дочерних элементов, он просто заполняется сверху вниз примерно на 10 пикселей.
потому что вы дали отступ 20px div для footer-wrapper
Я удалил отступы, а затем цвет фона вообще не отображается.
Вы предоставите мне обновленную CSS?
Разве это не работает для вас (из моего ответа выше)? jsfiddle.net/RE997

Jem · Answer 3 · 2014-03-25T10-08-00.000Z

Вы можете добавить display: inline-block; к #footer

Пример: http://jsfiddle.net/RE997/